Buttons
Customizable buttons for actions in forms, dialogs, and more, with variants, sizes, link rendering, disabled states, block layouts, and toggle behavior.
Base class
<bs-button> renders Bootstrap's base button styling. Without btn-style, it provides the base spacing, border, and alignment behavior; add a variant when the button needs explicit visual styling.
<bs-button>Base class</bs-button>
Variants
Use btn-style to select one of Bootstrap's semantic button variants.
Do not rely on color alone to communicate a button's purpose. Make the action clear through visible text or accessible context.
<bs-div display="Flex" gap="Default2" flex-wrap="Wrap">
<bs-button btn-style="Primary">Primary</bs-button>
<bs-button btn-style="Secondary">Secondary</bs-button>
<bs-button btn-style="Success">Success</bs-button>
<bs-button btn-style="Danger">Danger</bs-button>
<bs-button btn-style="Warning">Warning</bs-button>
<bs-button btn-style="Info">Info</bs-button>
<bs-button btn-style="Light">Light</bs-button>
<bs-button btn-style="Dark">Dark</bs-button>
</bs-div>
Outline buttons
Set outline="true" to render the matching outline variant instead of the filled variant.
Some outline styles use light foreground colors, so check the surrounding background for sufficient contrast.
<bs-div display="Flex" gap="Default2" flex-wrap="Wrap">
<bs-button btn-style="Primary" outline="true">Primary</bs-button>
<bs-button btn-style="Secondary" outline="true">Secondary</bs-button>
<bs-button btn-style="Success" outline="true">Success</bs-button>
<bs-button btn-style="Danger" outline="true">Danger</bs-button>
<bs-button btn-style="Warning" outline="true">Warning</bs-button>
<bs-button btn-style="Info" outline="true">Info</bs-button>
<bs-button btn-style="Light" outline="true">Light</bs-button>
<bs-button btn-style="Dark" outline="true">Dark</bs-button>
</bs-div>
Disable text wrapping
Set text-wrap="NoWrap" when button text must stay on one line.
<bs-button btn-style="Primary" text-wrap="NoWrap">This button text will not wrap</bs-button>
Button tags
bs-button can render as a normal button, submit/reset button, or anchor-style button when href is supplied.
Use anchor-rendered buttons for navigation. When a link is used to trigger in-page behavior, include the appropriate role and accessibility attributes so assistive technology understands the control.
<bs-div display="Flex" gap="Default2" flex-wrap="Wrap">
<bs-button btn-style="Primary" href="#" role="button">Link</bs-button>
<bs-button btn-style="Primary" btn-type="Submit">Submit</bs-button>
<bs-button btn-style="Primary" btn-type="Reset">Reset</bs-button>
</bs-div>
Sizes
Use btn-size for Bootstrap's large and small button sizes, or use CSS variables for one-off custom sizing.
<bs-div display="Flex" gap="Default2" flex-wrap="Wrap" bottom-margin="Default3">
<bs-button btn-style="Primary" btn-size="Large">Large button</bs-button>
<bs-button btn-style="Secondary" btn-size="Large">Large button</bs-button>
</bs-div>
<bs-div display="Flex" gap="Default2" flex-wrap="Wrap" bottom-margin="Default3">
<bs-button btn-style="Primary" btn-size="Small">Small button</bs-button>
<bs-button btn-style="Secondary" btn-size="Small">Small button</bs-button>
</bs-div>
<bs-button btn-style="Primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">Custom button</bs-button>
Disabled state
Set disabled="true" for disabled button elements. For link buttons, also provide accessibility attributes when a link must remain in the markup.
<bs-div display="Flex" gap="Default2" flex-wrap="Wrap" bottom-margin="Default3">
<bs-button btn-style="Primary" disabled="true">Primary button</bs-button>
<bs-button btn-style="Secondary" disabled="true">Button</bs-button>
<bs-button btn-style="Primary" outline="true" disabled="true">Primary button</bs-button>
<bs-button btn-style="Secondary" outline="true" disabled="true">Button</bs-button>
</bs-div>
<bs-div display="Flex" gap="Default2" flex-wrap="Wrap">
<bs-button btn-style="Primary" href="#" disabled="true" tabindex="-1" aria-disabled="true" role="button">Primary link</bs-button>
<bs-button btn-style="Secondary" href="#" disabled="true" tabindex="-1" aria-disabled="true" role="button">Link</bs-button>
</bs-div>
Link functionality caveat
Anchor-rendered buttons are links with button styling. Use them for navigation and keep real button elements for in-page actions, form submission, and controls that change application state.
Block buttons
Use display, gap, width, and flex utility attributes on a wrapper to create full-width or responsive button layouts.
The responsive example starts stacked, then switches to a flex row at the medium breakpoint.
<bs-div display="Grid" gap="Default2" bottom-margin="Default3">
<bs-button btn-style="Primary">Button</bs-button>
<bs-button btn-style="Primary">Button</bs-button>
</bs-div>
<bs-div display="Grid" gap="Default2" x-margin="AutoOrDefault" span="Six" bottom-margin="Default3">
<bs-button btn-style="Primary">Button</bs-button>
<bs-button btn-style="Primary">Button</bs-button>
</bs-div>
<bs-div display="Grid" gap="Default2" display-md="Flex" justify-content-md="End">
<bs-button btn-style="Primary" end-margin-md="Default2">Button</bs-button>
<bs-button btn-style="Primary">Button</bs-button>
</bs-div>
Button plugin
Bootstrap's button plugin supports toggle states through data-bs-toggle="button". BCL passes those data attributes through on bs-button.
Toggle states
Use Bootstrap's button plugin data attributes for toggle buttons. Add active and aria-pressed="true" when a toggle starts pressed.
<bs-div display="InlineFlex" gap="Default1" flex-wrap="Wrap" bottom-margin="Default3">
<bs-button data-bs-toggle="button">Toggle button</bs-button>
<bs-button is-active="true" data-bs-toggle="button" aria-pressed="true">Active toggle button</bs-button>
<bs-button disabled="true" data-bs-toggle="button">Disabled toggle button</bs-button>
</bs-div>
<bs-div display="InlineFlex" gap="Default1" flex-wrap="Wrap">
<bs-button btn-style="Primary" data-bs-toggle="button">Toggle button</bs-button>
<bs-button btn-style="Primary" is-active="true" data-bs-toggle="button" aria-pressed="true">Active toggle button</bs-button>
<bs-button btn-style="Primary" disabled="true" data-bs-toggle="button">Disabled toggle button</bs-button>
</bs-div>
Methods
Use Bootstrap's JavaScript Button instance methods when a page needs imperative toggle control after render.
const button = document.querySelector('#myButton')
const bsButton = bootstrap.Button.getOrCreateInstance(button)
bsButton.toggle()
CSS
Variables
Buttons use Bootstrap local CSS variables for color, background, border, spacing, font, radius, focus shadow, and disabled state styling. Use helper attributes for documented variants and CSS variables for local one-off visual changes.
Sass variables
Button Sass variables remain stylesheet concerns for global defaults such as padding, font sizes, radius, disabled opacity, and focus shadows.
Sass mixins
Bootstrap's Sass mixins generate button and outline-button variants. The helper exposes those generated variants through btn-style and outline.
Sass loops
Bootstrap loops over the theme color map to create the contextual button variants; BCL maps those variants through the button style enum.