React

Toolbar

ExamplesPropsCSS variables

Examples

Simple toolbar layout

Copied to clipboard

Toolbar with sections

Copied to clipboard

Props

ToolbarGroup props

The ToolbarGroup component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered as one toolbar group
classNamestringnullClasses applied to toolbar group

Toolbar props

The Toolbar component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered as toolbar content
classNamestringnullClasses applied to toolbar parent

ToolbarItem props

The ToolbarItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered as toolbar item content
classNamestringnullClasses applied to toolbar item

ToolbarSection props

The ToolbarSection component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered as toolbar section
classNamestringnullClasses applied to toolbar section
aria-labelstringAria label applied to toolbar section

CSS variables

--pf-c-avatar--BorderRadiusc_avatar_BorderRadius30em
--pf-c-avatar--Heightc_avatar_Height2.25rem
--pf-c-avatar--Widthc_avatar_Width2.25rem