Toolbar

Start, center, end.

Usage

Basic

The default bar paints no ground, border or rounding of its own, so it takes the surface it sits on and its controls line up with the table below. role="toolbar" sits on the host, so name the bar with a native aria-label. The element emits nothing; the controls inside carry their own events.

Variants

variant is the shape. plain, the default, has no edge. card is a bordered, rounded box on the white surface, the bar that floats on the canvas as its own card. flush squares the corners and keeps one bottom rule, so the bar can run edge to edge across a shell or inside a card.

Tones

tone is the ground. Unset, the bar is transparent and shows the canvas. surface is the white of the cards, sunken the well of a table header, canvas the app background, which only shows when the bar is sticky and content scrolls under it. brand is the navy chrome, shown below.

Three groups

The center group takes the space left over, so a count or a view switch sits in the middle while the ends keep their size.

Application shell

A flush rail and a flush bar on one canvas, each with one rule and no ground of its own, so the chrome reads as one piece and only the shell is rounded. landmark="region" makes the bar a named landmark for a shell embedded in a page, as here; landmark="banner" is for the one bar at the top of a whole page.

On navy chrome

tone="brand" paints the bar on the navy ground sui-side-nav paints under the same name, with inverse ink and an inverse rule. Quiet controls take their own inverse tone: the icon buttons here, and any quiet field with tone="inverse", like this select. An accent button reads on navy without one.

Inside a card

A plain bar inside a card takes the card's white. For a filter strip that reads as part of the table, flush with tone="sunken" gives the well of the table header, running to both edges of the card, so the card keeps one outer border.

Sticky and elevated

sticky pins the bar to the top of its scroll container; give it a tone, or the content scrolls through it. elevated adds the shadow that says the content is passing underneath, which a bottom rule alone does not say. Scroll the panel to see both.

One tab stop

The bar is a single tab stop for its buttons, links and selects, and it skips disabled ones. A text field keeps its own stop so the arrow keys still edit text. The log below listens to the native focusin, not to a component event.

Keyboard

API

Theming

Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.

See also