React

Toolbar

ExamplesPropsCSS Variables

Examples

Simple toolbar layout

Copied to clipboard

Toolbar with sections

Copied to clipboard

Props

Toolbar Props

The Toolbar component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything that can be rendered as toolbar content
classNamestringnullClasses applied to toolbar parent

ToolbarGroup Props

The ToolbarGroup component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything that can be rendered as one toolbar group
classNamestringnullClasses applied to toolbar group

ToolbarItem Props

The ToolbarItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything that can be rendered as toolbar item content
classNamestringnullClasses applied to toolbar item

ToolbarSection Props

The ToolbarSection component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything that can be rendered as toolbar section
classNamestringnullClasses applied to toolbar section
aria-labelcustomnullAria 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