www/docs/components/buttons.mdx
import ButtonActive from '!!raw-loader!../examples/Button/Active'; import ButtonBlock from '!!raw-loader!../examples/Button/Block'; import ButtonDisabled from '!!raw-loader!../examples/Button/Disabled'; import ButtonLoading from '!!raw-loader!../examples/Button/Loading'; import ButtonOutlineTypes from '!!raw-loader!../examples/Button/OutlineTypes'; import ButtonSizes from '!!raw-loader!../examples/Button/Sizes'; import ButtonTagTypes from '!!raw-loader!../examples/Button/TagTypes'; import ToggleButton from '!!raw-loader!../examples/Button/ToggleButton'; import ToggleButtonGroupControlled from '!!raw-loader!../examples/Button/ToggleButtonGroupControlled'; import ToggleButtonGroupUncontrolled from '!!raw-loader!../examples/Button/ToggleButtonGroupUncontrolled'; import ButtonTypes from '!!raw-loader!../examples/Button/Types';
Use any of the available button style types to quickly create a styled
button. Just modify the variant prop.
For a lighter touch, Buttons also come in outline-*
variants with no background color.
Normally <Button> components will render a HTML
<button> element. However you can render whatever you'd
like, adding a href prop will automatically render an
<a /> element. You can use the as prop to
render whatever your heart desires. React Bootstrap will take care of
the proper ARIA roles for you.
Fancy larger or smaller buttons? Add size="lg",
size="sm" for additional sizes.
Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities.
<CodeBlock language="jsx" live> {ButtonBlock} </CodeBlock>To set a button's active state simply set the component's
active prop.
Make buttons look inactive by adding the disabled prop to.
Watch out! <a> elements don't naturally support a
disabled attribute. In browsers that support it this is handled with a
point-events: none style but not all browsers support it
yet.
React Bootstrap will prevent any onClick handlers from
firing regardless of the rendered element.
When activating an asynchronous action from a button it is a good UX
pattern to give the user feedback as to the loading state, this can
easily be done by updating your <Button />s
props from a state change like below.
Buttons can also be used to style checkbox and
radio form elements. This is helpful when you want a toggle
button that works neatly inside an HTML form.
The above handles styling, But requires manually controlling the
checked state for each radio or checkbox in the group.
For a nicer experience with checked state management use the
<ToggleButtonGroup> instead of a <ButtonGroup> component.
The group behaves as a form component, where the value is an array of the selected
values for a named checkbox group or the single toggled
value in a similarly named radio group.