Toolbar
Frequently used actions for the current page. A toolbar replaces the bottom app bar, which Material 3 Expressive deprecated.
Docked
A docked toolbar spans the full width of its container and sits flush against an edge. Use it for actions that stay the same from page to page.
<script lang="ts">
import { IconButton, Toolbar } from 'noph-ui'
import { Icon } from 'noph-ui/icons'
</script>
<div style="width:26rem;max-width:100%;border-radius:1rem;overflow:hidden">
<Toolbar aria-label="Document actions">
<IconButton title="Favorite"><Icon>favorite</Icon></IconButton>
<IconButton title="Search"><Icon>search</Icon></IconButton>
<IconButton title="Share"><Icon>send</Icon></IconButton>
<IconButton title="Delete"><Icon>delete</Icon></IconButton>
</Toolbar>
</div>
Floating
A floating toolbar hovers above the content as a rounded island. Use it for actions that belong to
the page you are on. It is position: sticky, so it stays in flow and never covers the
end of the content.
<script lang="ts">
import { IconButton, Toolbar } from 'noph-ui'
import { Icon } from 'noph-ui/icons'
</script>
<div
style="width:26rem;max-width:100%;border-radius:1rem;padding:1rem;background:var(--np-color-surface-container-low)"
>
<Toolbar variant="floating" aria-label="Page actions">
<IconButton title="Favorite"><Icon>favorite</Icon></IconButton>
<IconButton title="Search"><Icon>search</Icon></IconButton>
<IconButton title="Share"><Icon>send</Icon></IconButton>
</Toolbar>
</div>
Vibrant
color="vibrant" gives a floating toolbar the primary container colour.
<script lang="ts">
import { IconButton, Toolbar } from 'noph-ui'
import { Icon } from 'noph-ui/icons'
</script>
<div
style="width:26rem;max-width:100%;border-radius:1rem;padding:1rem;background:var(--np-color-surface-container-low)"
>
<Toolbar variant="floating" color="vibrant" aria-label="Page actions">
<IconButton title="Favorite"><Icon>favorite</Icon></IconButton>
<IconButton title="Search"><Icon>search</Icon></IconButton>
<IconButton title="Share"><Icon>send</Icon></IconButton>
</Toolbar>
</div>
Vertical
orientation="vertical" stacks the actions and tells assistive technology the arrows move
up and down rather than left and right. Tooltips move to the trailing side, since above a stacked button
is where the button before it sits.
<script lang="ts">
import { IconButton, Toolbar } from 'noph-ui'
import { Icon } from 'noph-ui/icons'
</script>
<div style="border-radius:1rem;padding:1rem;background:var(--np-color-surface-container-low)">
<Toolbar variant="floating" orientation="vertical" placement="end" aria-label="Page actions">
<IconButton title="Favorite"><Icon>favorite</Icon></IconButton>
<IconButton title="Search"><Icon>search</Icon></IconButton>
<IconButton title="Share"><Icon>send</Icon></IconButton>
</Toolbar>
</div>
Theming
| Custom property | Description |
|---|---|
--np-toolbar-container-color | Background. |
--np-toolbar-color | Icon and text color. |
--np-toolbar-shape | Corner radius when floating. |
--np-toolbar-elevation | Shadow when floating. |
--np-toolbar-gap | Space between actions. |
--np-toolbar-inset | Distance from the edge when floating. |
Accessibility
The toolbar renders role="toolbar" with aria-orientation set from orientation. Give it an aria-label, Text formatting for instance,
because a toolbar without a name is announced as a nameless group of buttons.
Its buttons share one tab stop, the way the ARIA pattern asks: Tab moves into the toolbar and out
again, the arrow keys move along it, and Home and End jump to the ends. Each button inside still
needs its own title.
API
Renders a <div role="toolbar"> and takes its attributes. Give it an aria-label. The actions form a single tab stop with the arrow keys moving between
them, so a toolbar does not add one tab stop per button.
| Attribute | Type | Default | Description |
|---|---|---|---|
variant | 'docked' | 'floating' | 'docked' | Full width and flush, or a rounded island above the content. |
placement | 'bottom' | 'top' | 'start' | 'end' | 'bottom' | Which edge a floating toolbar hovers against. Ignored when docked. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction of the actions and of the arrow keys. |
color | 'standard' | 'vibrant' | 'standard' | Container colour of a floating toolbar. |