Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Base button

Blazor 
<BsButton>Base component</BsButton>

The BsButton component is intended to be used in conjunction with it's Variant parameter, or to serve as a basis for your own custom styles.

Variants

Blazor 
<BsButton Variant="BsButtonVariant.Primary">Primary</BsButton>
<BsButton Variant="BsButtonVariant.Secondary">Secondary</BsButton>
<BsButton Variant="BsButtonVariant.Success">Success</BsButton>
<BsButton Variant="BsButtonVariant.Danger">Danger</BsButton>
<BsButton Variant="BsButtonVariant.Warning">Warning</BsButton>
<BsButton Variant="BsButtonVariant.Info">Info</BsButton>
<BsButton Variant="BsButtonVariant.Light">Light</BsButton>
<BsButton Variant="BsButtonVariant.Dark">Dark</BsButton>

<BsButton Variant="BsButtonVariant.Link">Link</BsButton>

Button tags

  • Use BsButton for <button> elements.
  • Use BsAnchorButton for <a> elements.
  • Use BsNavLinkButton for <a> elements that toggles the active class based on whether its href matches the current URL.
  • Use BsLabelButton for <label> elements. It's used for checkbox and radio button groups.
  • We currently don’t have a component for <input> elements because we don’t see any reason to use it over <button> elements.
Link Nav link
Blazor 
<BsAnchorButton Variant="BsButtonVariant.Primary">Link</BsAnchorButton>
<BsButton Variant="BsButtonVariant.Primary">Button</BsButton>
<BsNavLinkButton Variant="BsButtonVariant.Primary">Nav link</BsNavLinkButton>
<BsLabelButton Variant="BsButtonVariant.Primary">Label</BsLabelButton>

Outline buttons

Blazor 
<BsButton Variant="BsButtonVariant.OutlinePrimary">Primary</BsButton>
<BsButton Variant="BsButtonVariant.OutlineSecondary">Secondary</BsButton>
<BsButton Variant="BsButtonVariant.OutlineSuccess">Success</BsButton>
<BsButton Variant="BsButtonVariant.OutlineDanger">Danger</BsButton>
<BsButton Variant="BsButtonVariant.OutlineWarning">Warning</BsButton>
<BsButton Variant="BsButtonVariant.OutlineInfo">Info</BsButton>
<BsButton Variant="BsButtonVariant.OutlineLight">Light</BsButton>
<BsButton Variant="BsButtonVariant.OutlineDark">Dark</BsButton>

Sizes

Blazor 
<BsButton Variant="BsButtonVariant.Primary" Size="BsButtonSize.Large">Large button</BsButton>
<BsButton Variant="BsButtonVariant.Primary" Size="BsButtonSize.Small">Small button</BsButton>

Disabled state

Blazor 
<BsButton Variant="BsButtonVariant.Primary" Disabled>Primary button</BsButton>
<BsButton Variant="BsButtonVariant.Secondary" Disabled>Button</BsButton>
<BsButton Variant="BsButtonVariant.OutlinePrimary" Disabled>Primary button</BsButton>
<BsButton Variant="BsButtonVariant.OutlineSecondary" Disabled>Button</BsButton>