Buttons

    Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

    Examples

    Use any of the available button style types to quickly create a styled button. Just modify the variant prop.

    Outline buttons

    For a lighter touch, Buttons also come in outline-* variants with no background color.

    Button tags

    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.

    Link

    Sizes

    Fancy larger or smaller buttons? Add size="lg", size="sm" for additional sizes.

    Block buttons

    Create responsive stacks of full-width, โ€œblock buttonsโ€ like those in Bootstrap 4 with a mix of our display and gap utilities.

    Active state

    To set a button's active state simply set the component's active prop.

    Disabled state

    Make buttons look inactive by adding the disabled prop to.

    Link

    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.

    Button loading state

    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.

    Checkbox / Radio

    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.

    Uncontrolled


    Controlled

    API

    import Button from 'react-bootstrap/Button'Copy import code for the Button component
    NameTypeDefaultDescription
    active
    boolean
    false

    Manually set the visual state of the button to :active

    as
    elementType

    You can use a custom element type for this component.

    disabled
    boolean
    false

    Disables the Button, preventing mouse events, even if the underlying component is an <a> element

    href
    string

    Providing a href will render an <a> element, styled as a button.

    size
    'sm' | 'lg'

    Specifies a large or small button.

    type
    'button' | 'reset' | 'submit' | null
    'button'

    Defines HTML button type attribute.

    variant
    string
    'primary'

    One or more button variant combinations

    buttons may be one of a variety of visual variants such as:

    'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'link'

    as well as "outline" versions (prefixed by 'outline-*')

    'outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-dark', 'outline-light'

    bsPrefix
    string
    'btn'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    ToggleButtonGroupview source file

    import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'Copy import code for the ToggleButtonGroup component
    NameTypeDefaultDescription
    name
    string

    An HTML <input> name for each child button.

    Required if type is set to 'radio'

    onChange
    function
    controls value

    Callback fired when a button is pressed, depending on whether the type is 'radio' or 'checkbox', onChange will be called with the value or array of active values

    size
    'sm' | 'lg'

    Sets the size for all Buttons in the group.

    type
    'checkbox' | 'radio'
    'radio'

    The input type of the rendered buttons, determines the toggle behavior of the buttons

    value
    any
    controlled by: onChange, initial prop: defaultValue

    The value, or array of values, of the active (pressed) buttons

    vertical
    boolean
    false

    Make the set of Buttons appear vertically stacked.

    ToggleButtonview source file

    import ToggleButton from 'react-bootstrap/ToggleButton'Copy import code for the ToggleButton component
    NameTypeDefaultDescription
    checked
    boolean

    The checked state of the input, managed by <ToggleButtonGroup> automatically

    disabled
    boolean

    The disabled state of both the label and input

    id required
    string

    id is required for button clicks to toggle input.

    inputRef
    ReactRef

    A ref attached to the <input> element

    name
    string

    The HTML input name, used to group like checkboxes or radio buttons together semantically

    onChange
    function

    A callback fired when the underlying input element changes. This is passed directly to the <input> so shares the same signature as a native onChange event.

    type
    'checkbox' | 'radio'

    The <input> element type

    value required
    string | arrayOf | number

    The value of the input, should be unique amongst it's siblings when nested in a ToggleButtonGroup.

    bsPrefix
    string
    'btn-check'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.