A toolbar is a set of actions related to a specific context that are grouped into a horizontal bar.

installyarn add @clayui/toolbar
versionNPM Version
useimport TimePicker from '@clayui/toolbar';

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.

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.

API Reference

Toolbar

typeof Toolbar
Parameters
Properties

inlineBreakpoint

"lg" | "sm" | "xl" | "xs" | "md" | undefined

Adds a helper class that turns the Toolbar inline at a specified breakpoint.

light

boolean | undefined

Determines if the tbar-light class should be added to the Toolbar, making it’s background white.

subnav

boolean | { disabled?: boolean; displayType?: "light" | "primary"; } | undefined

Defines if the toolbar should have the subnav-tbar class.

Returns
Element

Action

{ ({ className, disabled, spritemap, symbol, ...otherProps }: IProps): JSX.Element; displayName: string; }
Parameters

disabled

boolean | undefined

Flag that determines if the Action will have a disabled class, disabling interactions.

spritemap

string | undefined

Path to clay icon spritemap

symbol *

string

Symbol of the icon used inside the Action. You can find available symbols here: https://clayui.com/docs/components/icon.html

Returns
Element

Input

{ ({ className, ...otherProps }: IProps): JSX.Element; displayName: string; }
Parameters

component

"input" | "textarea" | React.ForwardRefExoticComponent<any> | undefined

Input component to render. Can either be a string like ‘input’ or ‘textarea’ or a component.

insetAfter

boolean | undefined

Flag to indicate if input-group-inset-after class should be applied

insetBefore

boolean | undefined

Flag to indicate if input-group-inset-before class should be applied

sizing

"lg" | "sm" | "regular" | undefined

Selects the height of the input.

Returns
Element

Item

{ ({ children, className, expand, ...otherProps }: IProps): JSX.Element; displayName: string; }
Parameters

expand

boolean | undefined

Flag to indicate if Item should auto expand to fill the remaining width.

Returns
Element

Label

{ ({ children, className, ...otherProps }: IProps): JSX.Element; displayName: string; }
Parameters

closeButtonProps

(React.ButtonHTMLAttributes<HTMLButtonElement> & { ref?: (instance: HTMLButtonElement | null) => void; }) | undefined

HTML properties that are applied to the ‘x’ button.

innerElementProps

(React.BaseHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>) | undefined

Pros to add to the inner label item

spritemap

string | undefined

Path to the location of the spritemap resource used for Icon.

withClose

boolean | undefined

Flag to indicate if component should include the close button

dismissible

boolean | undefined

Flag to indicate if label-dismissible class should be applied.

displayType

"danger" | "info" | "secondary" | "success" | "unstyled" | "warning" | undefined

Determines the style of the label.

large

boolean | undefined

Flag to indicate if the label should be of the large variant.

Returns
Element
{ ({ children, className, disabled, ...otherProps }: IProps): JSX.Element; displayName: string; }
Parameters

disabled

boolean | undefined

Flag that determines if the Link will have a disabled class, disabling interactions.

block

boolean | undefined

Renders the button as a block element.

borderless

boolean | undefined

Flag to indicate if link should be borderless.

button

boolean | { block?: boolean; monospaced?: boolean; small?: boolean; } | undefined

Config for button props

decoration

"underline" | "none" | null | undefined

Indicates if the text should be underlined

displayType

"danger" | "primary" | "secondary" | "unstyled" | "tertiary" | undefined

Determines how the link is displayed.

fontSize

Number | undefined

Sets the text size based on a number scale.

messages

{ opensNewWindow: string; } | undefined

Messages used for announcement to SR. Use this for internationalization.

monospaced

boolean | undefined

Flag to indicate if the link should be monospaced.

outline

boolean | undefined

Flag to indicate if the link should use the outlined style.

small

boolean | undefined

Indicates whether the button should use the small variant.

weight

"normal" | "semi-bold" | undefined

Determines the font-weight of the link.

Returns
Element
{ ({ children, className, wrap, ...otherProps }: IProps): JSX.Element; displayName: string; }
Parameters

wrap

boolean | undefined

Specifies whether the tbar-nav-wrap class should be added to the Toolbar.Nav

Returns
Element

Section

{ ({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>): JSX.Element; displayName: string; }
Returns
Element
Edit this page on GitHub

Contributors

Matuzalém Teles, Krešimir Čoko

Last edited May 9, 2025 at 6:15:38 AM