ButtonToolbar
import ButtonToolbar from '@concur/nui-widgets/lib/Buttons/ButtonToolbar';ButtonToolbar components act as containers for Button components. They provide the horizontal spacing needed to properly display buttons inline.
Examples
Default
The default toolbar has a shaded background. All buttons are placed within the toolbar as child elements. By default, buttons are aligned to the start.
<ButtonToolbar>
<Button>Button One</Button>
<Button>Button Two</Button>
<ButtonDropdown id='dropdownExample1' title='Button Three'>
<MenuItem>First Item</MenuItem>
<MenuItem>Second Item</MenuItem>
<MenuItem>Third Item</MenuItem>
</ButtonDropdown>
<ButtonToolbar.End>
<Button>Button Four</Button>
</ButtonToolbar.End>
</ButtonToolbar>Muted
Muted toolbars remove the shaded background and any spacing on the left and right so buttons will align with other page content. To create a muted toolbar, simply set the muted property.
<ButtonToolbar muted>
<ButtonDropdown id='dropdownExample1' title='Action Dropdown'>
<MenuItem>First Item</MenuItem>
<MenuItem>Second Item</MenuItem>
<MenuItem>Third Item</MenuItem>
</ButtonDropdown>
<ButtonToolbar.End>
<Button type='primary'>Primary Action</Button>
<Button type='link'>Other Action</Button>
</ButtonToolbar.End>
</ButtonToolbar>Alignment
Use the optional ButtonToolbar.Start, ButtonToolbar.Center, and ButtonToolbar.End to align the toolbar contents to the start, center, or end.
<ButtonToolbar>
<ButtonToolbar.Center>
<Button>Button One</Button>
<Button>Button Two</Button>
<Button>Button Three</Button>
</ButtonToolbar.Center>
</ButtonToolbar>Usage
ButtonToolbar
Properties
| Property | Type | Default | Description |
|---|---|---|---|
children | Node | Collection of Button components to be placed in the toolbar. | |
className | String | Custom classes to add to the button toolbar’s enclosing <div> tag. | |
muted | Boolean | false | Renders the toolbar in an alternate “muted” style in which background color and left and right margins are removed. |
ButtonToolbar.Start
Properties
| Property | Type | Default | Description |
|---|---|---|---|
children | Node | Collection of React components to be placed in the region. | |
className | String | Custom classes to be added to the <div> that defines the region. |
ButtonToolbar.Center
Properties
| Property | Type | Default | Description |
|---|---|---|---|
children | Node | Collection of React components to be placed in the region. | |
className | String | Custom classes to be added to the <div> that defines the region. |
ButtonToolbar.End
Properties
| Property | Type | Default | Description |
|---|---|---|---|
children | Node | Collection of React components to be placed in the region. | |
className | String | Custom classes to be added to the <div> that defines the region. |