按钮

选项

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

const buttonsInstance = (
  <ButtonToolbar>
    {/* Standard button */}
    <Button>Default</Button>

    {/* Provides extra visual weight and identifies the primary action in a set of buttons */}
    <Button bsStyle="primary">Primary</Button>

    {/* Indicates a successful or positive action */}
    <Button bsStyle="success">Success</Button>

    {/* Contextual button for informational alert messages */}
    <Button bsStyle="info">Info</Button>

    {/* Indicates caution should be taken with this action */}
    <Button bsStyle="warning">Warning</Button>

    {/* Indicates a dangerous or potentially negative action */}
    <Button bsStyle="danger">Danger</Button>

    {/* Deemphasize a button by making it look like a link while maintaining button behavior */}
    <Button bsStyle="link">Link</Button>
  </ButtonToolbar>
);
ReactDOM.render(buttonsInstance, mountNode);

Button spacing Because React doesn't output newlines between elements, buttons on the same line are displayed flush against each other. To preserve the spacing between multiple inline buttons, wrap your button group in <ButtonToolbar />.

尺寸

Fancy larger or smaller buttons? Add bsSize="large", bsSize="small", or bsSize="xsmall" for additional sizes.

Large buttonLarge button Default buttonDefault button Small buttonSmall button Extra small buttonExtra small button show code Create block level buttons—those that span the full width of a parent— by adding the block prop.

Block level button Block level button show code

激活状态

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

Primary buttonButton show code

禁用状态

Make buttons look unclickable by fading them back 50%. To do this add the disabled attribute to buttons.

Primary buttonButton show code Event handler functionality not impacted This prop will only change the <Button />’s appearance, not its functionality. Use custom logic to disable the effect of the onClick handlers.

按钮标签

The DOM element tag is choosen automatically for you based on the props you supply. Passing a href will result in the button using a <a /> element otherwise a <button /> element will be used.

LinkButton show code

按钮加载状态

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.

Loading state show code

属性

按钮组 ButtonGroup, ButtonToolbar

Group a series of buttons together on a single line with the button group.

基本示例

Wrap a series of s in a .

LeftMiddleRight show code

按钮工具条

Combine sets of s into a for more complex components.

12345678 show code

尺寸

Instead of applying button sizing props to every button in a group, just add bsSize prop to the .

LeftMiddleRight LeftMiddleRight LeftMiddleRight LeftMiddleRight show code

内嵌

You can place other button types within the like s.

12Dropdown show code

垂直变化

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

Just add vertical to the .

Button Button Dropdown Button Button Dropdown Dropdown show code

Moreover, you can have buttons be block level elements so they take the full width of their container, just add block to the , in addition to the vertical you just added.

Full width button Full width button show code

Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

Style issues There are some issues and workarounds required when using this property, please see bootstrap’s button group docs for more specifics. Just add justified to the .

Left Middle Dropdown show code

Props

Name Type Default Description block
boolean false
Display block buttons, only useful when used with the "vertical" prop. @type {bool}

bsClass
string 'btn-group'
Base css class name and prefix for the Component. Generally one should only change bsClass if they are providing new, non bootstrap, css styles for a component.

justified
boolean false
vertical
boolean false

Dropdowns DropdownButton, SplitButton, Dropdown

Single button dropdowns

Create a dropdown button with the component.

Default Primary Success Info Warning Danger Link show code

Split button dropdowns

Similarly, create split button dropdowns with the component.

Default Primary Success Info Warning Danger show code

Sizing

Dropdowns work with buttons of all sizes.

Large button Default button Small button Extra small button show code

No caret variation

Remove the caret using the noCaret prop.

No caret show code

Dropup variation

Trigger dropdown menus that site above the button by adding the dropup prop.

Dropup Right dropup show code

Dropdown right variation

Trigger dropdown menus that align to the right of the button using the pullRight prop.

Dropdown right show code

Dropdown Customization

If the default handling of the dropdown menu and toggle components aren't to your liking, you can customize them, by using the more basic Dropdown Component to explicitly specify the Toggle and Menu components

Additional Import Options As a convenience Toggle and Menu components available as static properties on the Dropdown component. However, you can also import them directly, from the /lib directory like: require("react-bootstrap/lib/DropdownToggle"). Pow! Zoom! mix it up style-wise show code Custom Dropdown Components

For those that want to customize everything, you can forgo the included Toggle and Menu components, and create your own. In order to tell the Dropdown component what role your custom components play add a special prop bsRole to your menu or toggle components. The Dropdown expects at least one component with bsRole="toggle" and exactly one with bsRole="menu".

custom Toggle show code

Props

DropdownButton

Name Type Default Description bsClass
string 'dropdown'
Base css class name and prefix for the Component. Generally one should only change bsClass if they are providing new, non bootstrap, css styles for a component.

bsSize
bsSize Component size variations.

bsStyle
bsStyle Component visual or contextual style variants.

children
node The children of a Dropdown may be a or a . @type {node}

componentClass
elementType ButtonGroup
disabled
boolean false
dropup
boolean false
id required
string|number An html id attribute, necessary for assistive technologies, such as screen readers. @type {string|number} @required

noCaret
boolean false
When used with the title prop, the noCaret option will not render a caret icon, in the toggle element.

onClose
function A callback fired when the Dropdown closes.

onSelect
function A callback fired when a menu item is selected.

function(Object event, Any eventKey) onToggle
function controls open A callback fired when the Dropdown wishes to change visibility. Called with the requested open value.

function(Boolean isOpen) {} @controllable open

open
boolean controlled by: onToggle, initial prop: defaultOpen Whether or not the Dropdown is visible.

@controllable onToggle

pullRight
boolean false
role
string If 'menuitem', causes the dropdown to behave like a menu item rather than a menu button.

title required
node

SplitButton

Name Type Default Description bsClass
string 'dropdown'
Base css class name and prefix for the Component. Generally one should only change bsClass if they are providing new, non bootstrap, css styles for a component.

bsStyle
bsStyle Component visual or contextual style variants.

children
node The children of a Dropdown may be a or a . @type {node}

componentClass
elementType ButtonGroup
disabled
boolean false
dropup
boolean false
href
string id required
string|number An html id attribute, necessary for assistive technologies, such as screen readers. @type {string|number} @required

onClose
function A callback fired when the Dropdown closes.

onSelect
function A callback fired when a menu item is selected.

function(Object event, Any eventKey) onToggle
function controls open A callback fired when the Dropdown wishes to change visibility. Called with the requested open value.

function(Boolean isOpen) {} @controllable open

open
boolean controlled by: onToggle, initial prop: defaultOpen Whether or not the Dropdown is visible.

@controllable onToggle

pullRight
boolean false
role
string If 'menuitem', causes the dropdown to behave like a menu item rather than a menu button.

target
string title required
node The content of the split button.

Dropdown

Name Type Default Description bsClass
string 'dropdown'
Base css class name and prefix for the Component. Generally one should only change bsClass if they are providing new, non bootstrap, css styles for a component.

children
node The children of a Dropdown may be a or a . @type {node}

componentClass
elementType ButtonGroup
disabled
boolean Whether or not component is disabled.

dropup
boolean The menu will open above the dropdown button, instead of below it.

id required
string|number An html id attribute, necessary for assistive technologies, such as screen readers. @type {string|number} @required

onClose
function A callback fired when the Dropdown closes.

onSelect
function A callback fired when a menu item is selected.

function(Object event, Any eventKey) onToggle
function controls open A callback fired when the Dropdown wishes to change visibility. Called with the requested open value.

function(Boolean isOpen) {} @controllable open

open
boolean controlled by: onToggle, initial prop: defaultOpen Whether or not the Dropdown is visible.

@controllable onToggle

pullRight
boolean Align the menu to the right side of the Dropdown toggle

role
string If 'menuitem', causes the dropdown to behave like a menu item rather than a menu button.

Menu items MenuItem

This component represents a menu item in a dropdown.

It supports the basic anchor properties href, target, title.

It also supports different properties of the normal Bootstrap MenuItem.

header: To add a header label to sections divider: Adds an horizontal divider between sections disabled: shows the item as disabled, and prevents the onclick eventKey: passed to the callback onSelect: a callback that is called when the user clicks the item. The callback is called with the following arguments: eventKey, href and target

Header link Header link disabled link with title link that alerts show code

Props

Name Type Default Description active
boolean bsClass
string 'dropdown'
Base css class name and prefix for the Component. Generally one should only change bsClass if they are providing new, non bootstrap, css styles for a component.

disabled
boolean false
divider
all false
eventKey
any header
boolean false
href
string id
string | number onClick
function onKeyDown
function onSelect
function target
string title
string