Button

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

Idea React provides the Button wrapper for buttons and button links. It accepts the same Bootstrap 6 classes, including solid, outline, subtle, text, and link variants.

Base class

Buttons have a standard .btn class that sets up basic styles such as padding and content alignment, along with fallback visual styles for basic accessibility. Change this class to another button class to apply different visual styles for a specific button variant and theme.

The .btn class is intended to be a starting point for your own custom button styles, while our provided button variants can be used alongside .theme-* classes or as a basis for your own custom styles.

Variants

Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control. Combined with our utilities, you have a very powerful set of defaults to choose from.

Compare all button variants and styles at once:

Use the theme property for the semantic color and variant for the visual treatment. The default variant is solid.

Link buttons

Use the .btn-link class to create a button that looks like a link.

Link buttons can also be styled with the theme colors.

Styled buttons

Add visual depth to solid buttons with gradients and shadows using the .btn-styled modifier class. This provides a more three-dimensional appearance that can be customized further with CSS variables.

The gradient and shadow can be customized via CSS variables:

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Set href to render an anchor through the wrapper. React inputs use defaultValue instead of a static value attribute when the value should not be controlled.

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

You can even roll your own custom sizing with CSS variables:

Icon buttons

Use .btn-icon for square buttons that contain only an icon. This class sets aspect-ratio: 1 and removes padding, making the button perfectly square based on its min-height. Always include an aria-label attribute on icon-only buttons to ensure they are accessible to screen reader users.

Combine with size classes for different icon button sizes:

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Disabled buttons have pointer-events: none, preventing hover and active states from triggering, and some additional styling to indicate the disabled state.

Disabled buttons using the <a> element behave a bit different. Use the .disabled class instead of the attribute on <a> elements to make them visually appear disabled. If you need to keep the href attribute, you may need additional HTML to fully disable the link functionality.

The Button wrapper applies the disabled state to links automatically: it adds the disabled class and aria-disabled, removes href and keyboard focus, and prevents navigation.

You may also want to use custom JavaScript to disable the link functionality altogether.

Block buttons

Use the .d-grid utility to create responsive stacks of full-width “block buttons”. Space them out with gap utilities.

Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .md:d-block replaces the .d-grid class, thus nullifying the gap-2 utility. Resize your browser to see them change.

You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use .col-6. Center it horizontally with .mx-auto, too.

Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they're no longer stacked.

Toggle buttons

Create button-like checkboxes and radio buttons by adding .btn-check to a <label> element with button classes, with a checkbox or radio input nested inside. The input is visually hidden while the label provides the button appearance. These toggle buttons can further be grouped in a button group if needed.

The ToggleButton wrapper renders the label, the visually hidden input, and the button classes.

Visually, these toggle buttons are identical to our JavaScript toggle buttons, but are conveyed differently by assistive technologies. Checkbox toggles will be announced by screen readers as "checked"/"not checked" as they are checkboxes under the hood. The JavaScript toggle buttons are announced as "button"/"button pressed". It's up to you to decide which approach makes more sense for your use case.

Checkboxes

Checkboxes can be checked, unchecked, or disabled. Checkbox-based toggle buttons only toggle a single button's state.

Radios

Radios can be checked, unchecked, or disabled. Use radio-based toggle buttons to toggle states between a set of buttons that include input elements with the same name attribute value.

Grouped toggle buttons use the ButtonGroup wrapper:

Button plugin

The button plugin allows you to create simple on/off toggle buttons.

Visually, these toggle buttons are identical to our input toggle buttons, but are conveyed differently by assistive technologies. Checkbox toggles will be announced by screen readers as "checked"/"not checked" as they are checkboxes under the hood. The JavaScript toggle buttons are announced as "button"/"button pressed". It's up to you to decide which approach makes more sense for your use case.

Toggle states

Add the .active class and aria-pressed to a toggle button. Use aria-pressed="false" for the default state. If you're pre-toggling a button, add the .active class and aria-pressed="true".

aria-pressed has no default value. A button without it is announced as a plain button, not as a toggle. In React, keep both the active class and aria-pressed in sync with state instead of relying on Bootstrap's data-bs-toggle="button" plugin:

const [pressed, setPressed] = useState(false);

<Button
  variant="solid"
  theme="primary"
  className={pressed ? 'active' : undefined}
  aria-pressed={pressed}
  onClick={() => setPressed(!pressed)}
>
  Toggle button
</Button>;

The plugin instance methods (toggle, dispose, getInstance) are not needed with React: update state in the event handler and let the render pass derive the class names and ARIA attributes.

CSS

Buttons use CSS variables for real-time customization. These are set on the base .btn class and inherited by all button variants. Each variant class (.btn-solid, .btn-outline, etc.) updates these variables based on the current theme color, allowing buttons to adapt automatically when used with .theme-* classes.

Styled buttons use the $button-styled-tokens Sass map, and link buttons use the $button-link-tokens Sass map. Button sizes come from the $button-sizes Sass map, while the $button-variants map defines which theme color tokens each variant uses. The $btn-variant-selectors list controls which selectors receive the base button styles, which is why variant classes such as .btn-solid work without requiring .btn.

See the upstream button CSS for the complete variable and Sass reference.