Edit page

Toolbar

The responsive Toolbar layout is a versatile tool that allows spacing, grouping, and aligning inline items.

Basic Usage

To implement the Toolbar component, you need to import it first:

import { Toolbar, ToolbarItem } from '@react-ui-org/react-ui';

And use it:

See API for all available options.

General Guidelines

  • Toolbar is great for flexible inline layouts. For stacking your content vertically or building two-dimensional layouts head to the Grid layout.

  • Wrap your items into the ToolbarItem component. This ensures your content is properly spaced and aligned with other Toolbar elements. Do not try to put any custom HTML or React components directly into the Toolbar layout without wrapping it with the ToolbarItem first.

  • Be careful with using Toolbar with long or dynamic items in narrow containers. Toolbar intentionally prevents its items from shrinking using flex: none which may cause overflow in case of lack of horizontal space. Depending on your situation, consider turning on the nowrap option (which allows shrinking of items but disables Toolbar from wrapping), using the Text component to precisely control text wrapping, or switching to the Grid layout.

Alignment

You can tweak your Toolbar layout using rich alignment options, both in horizontal and vertical direction.

👉 At the current stage of development, React UI is RTL aware so switching to a fully RTL-compatible behavior in the future should be painless. That's why the justification values are called rather start than left and end instead of right.

Groups

Toolbar items can be grouped which enables you aligning related items together. To provide the best possible flexibility for building your layout, the ToolbarGroup allows you to set many options similar to the Toolbar: vertical alignment, dense spacing, or disable wrapping.

Dense Layout

Sometimes it's useful to get related items even closer together. This can be easily achieved through the dense option which can be applied on individual toolbar groups, or on the entire toolbar.

Wrapping

By default, all toolbar items are queued up one after another in a row. The items automatically wrap and create a new row. To prevent this behavior, just set the nowrap option on the Toolbar or on individual ToolbarGroups. Note that ToolbarGroups can still wrap when the wrapping is disabled just on their parent Toolbar.

📐 Try resizing the playground below to see how it works.

👉 Depending on your situation, you may need to further control wrapping of text content placed within Toolbar. The Text component is designed specifically for this kind of job.

Flexible Items

Toolbar items can be made flexible to grow and shrink according to the available space. This is useful e.g. when you need to combine text with an action:

Or to build a classic media layout with image on the left and text on the right:

API

Prop nameTypeDefaultRequiredDescription
align'top' │ 'middle' │ 'bottom' │ 'baseline''top'false

Vertical alignment of toolbar items and groups.

childrennodenullfalse

Nested elements. Supported types are:

  • ToolbarItems
  • ToolbarGroups

If none are provided nothing is rendered.

denseboolfalsefalse

If true, spacing of all toolbar items in the toolbar will be reduced.

idstringundefinedfalse

ID of the root HTML element.

justify'start' │ 'center' │ 'end' │ 'space-between''start'false

Horizontal alignment (distribution) of toolbar items and groups.

nowrapboolfalsefalse

If set, the toolbar will not wrap.

ToolbarGroup API

A wrapper for grouping ToolbarItems together.

Prop nameTypeDefaultRequiredDescription
align'top' │ 'middle' │ 'bottom' │ 'baseline''top'false

Vertical alignment of toolbar items in the group.

childrennodenullfalse

Grouped ToolbarItems. If none are provided nothing is rendered.

denseboolfalsefalse

If true, spacing of toolbar items in the group will be reduced.

idstringundefinedfalse

ID of the root HTML element.

nowrapboolfalsefalse

If set, the toolbar group will not wrap.

ToolbarItem API

A wrapper for individual toolbar items.

Prop nameTypeDefaultRequiredDescription
childrennodenullfalse

Content of the toolbar item. If none are provided nothing is rendered.

flexibleboolfalsefalse

Allow item to grow and shrink if needed.

idstringundefinedfalse

ID of the root HTML element.

Theming

Custom PropertyDescription
--rui-Toolbar__gapGap between toolbar items
--rui-Toolbar__gap--denseDense gap between toolbar items