Toolbar

<ts-toolbar> vv0.4.0

The ts-toolbar component.

Open in Storybook for interactive demos.

Preview

<ts-toolbar size="md" variant="default">Content</ts-toolbar>

Properties

Property	Attribute	Type	Default	Description
size	size	"lg" | "md" | "sm" | "xl" | "xs"	'md'	The toolbar size.
variant	variant	"bordered" | "default" | "elevated"	'default'	The toolbar variant style.

Slots

Name	Description
*(default)*	Default slot for toolbar items (center).
end	Right/end-aligned items.
start	Left/start-aligned items.

CSS Parts

Use ::part() to style internal elements:

Part	Description
base	The toolbar container.
center	The center/default slot wrapper.
end	The end slot wrapper.
start	The start slot wrapper.

ts-toolbar::part(base) {
  /* your custom styles */
}

Usage

HTML

<ts-toolbar size="md" variant="default">Content</ts-toolbar>

React

import { TsToolbar } from '@tessera-ui/react';

<TsToolbar size="md" variant="default">Content</TsToolbar>