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.

    Sizes

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

    Create block level buttons—those that span the full width of a parent—by adding block

    Active state

    To set a buttons active state simply set the components active prop.

    Disabled state

    Make buttons look inactive by adding the disabled prop to.

    Watch out! <a> element's 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 toggle> 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.

    block
    boolean

    Spans the full width of the Button parent

    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 values

    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

    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

    ToggleButtonview source file

    import ToggleButton from 'react-bootstrap/ToggleButton'Copy import code for the ToggleButton component
    There are no public props for this component.