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. |
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. |