Toolbar
View in LexiconA toolbar is a set of actions related to a specific context that are grouped into a horizontal bar.
| install | yarn add @clayui/toolbar |
|---|---|
| version |  |
| use | import TimePicker from '@clayui/toolbar'; |
Table of Contents
Introduction
A toolbar organizes actions into a horizontal bar that is responsive. Its height changes to accommodate the height of the elements it contains. The toolbar always maintains the vertical alignment.
import {Provider} from '@clayui/core'; import Toolbar from '@clayui/toolbar'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <Toolbar> <Toolbar.Nav> <Toolbar.Item> <Toolbar.Action aria-label="Previous" disabled href="#" symbol="angle-left" title="Previous" /> </Toolbar.Item> <Toolbar.Item expand> <Toolbar.Section> <span className="text-truncate-inline"> <span className="text-truncate"> { 'Item 1 of 3,138,732,873,467,182,321,341,231,234,342,559,827,334,424' } </span> </span> </Toolbar.Section> </Toolbar.Item> <Toolbar.Item> <Toolbar.Link href="#">{'Component Link'}</Toolbar.Link> </Toolbar.Item> <Toolbar.Item> <Toolbar.Action aria-label="Next" title="Next" disabled href="#" symbol="angle-right" /> </Toolbar.Item> <Toolbar.Item> <Toolbar.Action aria-label="Close" title="Close" disabled href="#" symbol="times" /> </Toolbar.Item> </Toolbar.Nav> </Toolbar> </div> </Provider> ); }
Composing
Toolbar.Nav is the highest level wrapper to be used inside the Toolbar to wrap all the content inside.
Toolbar.Item represents a Toolbar child item, a list item that is supposed to wrap around any of the other low-level components.
Toolbar.Section is a wrapper to be used inside the Toolbar.Item that makes the contents it wraps display inline.
Toolbar.Action is used when you want a clickable icon to add an action in the Toolbar.
Toolbar.Input, Toolbar.Label and Toolbar.Link are essentially a wrapper around their respective Clay components with some specifics related to Toolbar.
import {Provider} from '@clayui/core'; import Toolbar from '@clayui/toolbar'; import {ClayInput} from '@clayui/form'; import Icon from '@clayui/icon'; import {ClayDropDownWithItems} from '@clayui/drop-down'; import Button, {ClayButtonWithIcon} from '@clayui/button'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <Toolbar> <Toolbar.Nav> <Toolbar.Item className="text-left" expand> <Toolbar.Section> <label className="component-title">{'Foo Bar'}</label> <Icon symbol="lock" /> </Toolbar.Section> </Toolbar.Item> <Toolbar.Item> <ClayInput.Group> <ClayInput.GroupItem> <ClayInput className="form-control-inline" placeholder="Search..." /> </ClayInput.GroupItem> </ClayInput.Group> </Toolbar.Item> <Toolbar.Item> <Toolbar.Section> <Button.Group> <ClayButtonWithIcon aria-label="Previous" title="Previous" displayType="secondary" onClick={() => {}} small symbol="angle-left" /> <ClayButtonWithIcon aria-label="Next" title="Next" displayType="secondary" onClick={() => {}} small symbol="angle-right" /> </Button.Group> </Toolbar.Section> </Toolbar.Item> <Toolbar.Item> <Toolbar.Section> <Button displayType="secondary" onClick={() => {}}> {'Delete'} </Button> <Button className="inline-item-after" onClick={() => {}}> {'Edit'} </Button> </Toolbar.Section> </Toolbar.Item> <Toolbar.Item> <ClayDropDownWithItems items={[ {href: '#one', label: 'one'}, {href: '#two', label: 'two'}, { disabled: true, href: '#three', label: 'three', }, {href: '#four', label: 'four'}, ]} trigger={ <ClayButtonWithIcon aria-label="More Actions" title="More Actions" displayType="unstyled" small symbol="ellipsis-v" /> } /> </Toolbar.Item> </Toolbar.Nav> </Toolbar> </div> </Provider> ); }
API Reference
Toolbar
typeof ToolbarParameters
Properties
inlineBreakpoint
"lg" | "sm" | "xl" | "xs" | "md" | undefinedAdds a helper class that turns the Toolbar inline at a specified breakpoint.
light
boolean | undefinedDetermines if the tbar-light class should be added to the Toolbar, making it’s background white.
subnav
boolean | { disabled?: boolean; displayType?: "light" | "primary"; } | undefinedDefines if the toolbar should have the subnav-tbar class.
Returns
ElementAction
{ ({ className, disabled, spritemap, symbol, ...otherProps }: IProps): JSX.Element; displayName: string; }Parameters
disabled
boolean | undefinedFlag that determines if the Action will have a disabled class, disabling interactions.
spritemap
string | undefinedPath to clay icon spritemap
symbol *
stringSymbol of the icon used inside the Action. You can find available symbols here: https://clayui.com/docs/components/icon.html
Returns
ElementInput
{ ({ className, ...otherProps }: IProps): JSX.Element; displayName: string; }Parameters
component
"input" | "textarea" | React.ForwardRefExoticComponent<any> | undefinedInput component to render. Can either be a string like ‘input’ or ‘textarea’ or a component.
insetAfter
boolean | undefinedFlag to indicate if input-group-inset-after class should be applied
insetBefore
boolean | undefinedFlag to indicate if input-group-inset-before class should be applied
sizing
"lg" | "sm" | "regular" | undefinedSelects the height of the input.
Returns
ElementItem
{ ({ children, className, expand, ...otherProps }: IProps): JSX.Element; displayName: string; }Parameters
expand
boolean | undefinedFlag to indicate if Item should auto expand to fill the remaining width.
Returns
ElementLabel
{ ({ children, className, ...otherProps }: IProps): JSX.Element; displayName: string; }Parameters
closeButtonProps
(React.ButtonHTMLAttributes<HTMLButtonElement> & { ref?: (instance: HTMLButtonElement | null) => void; }) | undefinedHTML properties that are applied to the ‘x’ button.
innerElementProps
(React.BaseHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>) | undefinedPros to add to the inner label item
spritemap
string | undefinedPath to the location of the spritemap resource used for Icon.
withClose
boolean | undefinedFlag to indicate if component should include the close button
dismissible
boolean | undefinedFlag to indicate if label-dismissible class should be applied.
displayType
"danger" | "info" | "secondary" | "success" | "unstyled" | "warning" | undefinedDetermines the style of the label.
large
boolean | undefinedFlag to indicate if the label should be of the large variant.
Returns
ElementLink
{ ({ children, className, disabled, ...otherProps }: IProps): JSX.Element; displayName: string; }Parameters
disabled
boolean | undefinedFlag that determines if the Link will have a disabled class, disabling interactions.
block
boolean | undefinedRenders the button as a block element.
borderless
boolean | undefinedFlag to indicate if link should be borderless.
button
boolean | { block?: boolean; monospaced?: boolean; small?: boolean; } | undefinedConfig for button props
decoration
"underline" | "none" | null | undefinedIndicates if the text should be underlined
displayType
"danger" | "primary" | "secondary" | "unstyled" | "tertiary" | undefinedDetermines how the link is displayed.
fontSize
Number | undefinedSets the text size based on a number scale.
messages
{ opensNewWindow: string; } | undefinedMessages used for announcement to SR. Use this for internationalization.
monospaced
boolean | undefinedFlag to indicate if the link should be monospaced.
outline
boolean | undefinedFlag to indicate if the link should use the outlined style.
small
boolean | undefinedIndicates whether the button should use the small variant.
weight
"normal" | "semi-bold" | undefinedDetermines the font-weight of the link.
Returns
ElementNav
{ ({ children, className, wrap, ...otherProps }: IProps): JSX.Element; displayName: string; }Parameters
wrap
boolean | undefinedSpecifies whether the tbar-nav-wrap class should be added to the Toolbar.Nav
Returns
ElementSection
{ ({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>): JSX.Element; displayName: string; }Returns
ElementContributors
Last edited May 9, 2025 at 6:15:38 AM
Table of Contents