Actions

AppToolbar

A Figma-style tool strip — the active tool expands to show its label.

<app-toolbar label="Tools" name="tool" value="select"><app-toolbar-item value="select" title="Select" icon="cursor" /></app-toolbar>

<app-toolbar> is action chrome over a work surface — a pill strip of icon tools where exactly one tool is "in hand". The active tool expands to reveal its label; the rest stay icon-only. Optional momentary <app-toolbar-action> buttons sit after a divider and just fire.

It is not <app-segmented> — that chooses a form value (view mode, period). A toolbar selects the current tool. Built on real radio inputs, so it posts the active tool inside a plain form with no JavaScript, keyboard navigation comes from the browser, and the expand animation is pure CSS honouring prefers-reduced-motion.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the toolbar above it.

<app-toolbar label="Canvas tools" name="tool" value="select">
    <app-toolbar-item value="select" title="Select" icon="cursor" />
    <app-toolbar-item value="draw" title="Draw" icon="pencil" />
    <app-toolbar-item value="shape" title="Shapes" icon="pentagon" />
    <app-toolbar-item value="text" title="Text" icon="text" />
    <app-toolbar-item value="comment" title="Comment" icon="chat" />
    <app-toolbar-item value="ai" title="AI edit" icon="stars" />
</app-toolbar>

A strip of tools

Compose with <app-toolbar-item> children. Every tool needs a value, a title (its label and accessible name) and an icon. value on the toolbar marks the active tool; name is what it posts as.

Click across the tools
The clicked tool fills with the brand colour and slides its label open — no JavaScript involved.
Show code 
<app-toolbar label="Canvas tools" name="tool" value="select">
    <app-toolbar-item value="select" title="Select" icon="cursor" />
    <app-toolbar-item value="draw" title="Draw" icon="pencil" />
    <app-toolbar-item value="shape" title="Shapes" icon="shield" />
    <app-toolbar-item value="text" title="Text" icon="text" />
    <app-toolbar-item value="comment" title="Comment" icon="chat" />
</app-toolbar>

Momentary actions

<app-toolbar-action> children render after a divider as plain icon buttons — they never stay selected. Wire their click in page JS; use them for commands that live beside the tools.

Tools plus actions
Show code 
<app-toolbar label="Canvas tools" name="tool" value="select">
    <app-toolbar-item value="select" title="Select" icon="cursor" />
    <app-toolbar-item value="draw" title="Draw" icon="pencil" />
    <app-toolbar-action title="Lock canvas" icon="lock" />
    <app-toolbar-action title="Share" icon="share-2" />
</app-toolbar>
A toggle is an action your page tracksSwap the action's icon/title on state in page JS, or put an <app-check type="switch"> beside the canvas. The toolbar itself only owns which tool is in hand.

Disabled tools

Disable one tool (visible, unpickable) with disabled on the item, or the whole strip with disabled on the toolbar.

One tool off, then everything off
Show code 
<app-toolbar-item value="ai" title="AI edit" icon="stars" disabled="true" />
<app-toolbar label="Tools" name="tool" value="select" disabled="true">…</app-toolbar>

When to use

Use it when

  • A work surface (canvas, editor, board) where the user picks the tool in hand.
  • The set is small and icon-first, with one clearly active tool.
  • Commands that belong beside the tools ride along as momentary actions.

Reach for something else when

  • You are choosing a form value — view mode, period, theme. → app-segmented
  • The icons are row/record actions in a table or header. → action-icon
  • You want navigation shortcuts on a marketing page. → app-floating-dock

Every option

The whole surface of the component, one cell per value — including states a normal example doesn't show: every active tool, actions on/off, partial and full disable, and an empty strip.

value — every tool active

value="select"
value="draw"
value="shape"
value="text"
value="comment"

actions

(no actions)
app-toolbar-action ×2

disabled — item vs whole strip

(default)
app-toolbar-item disabled="true" — one tool off
app-toolbar disabled="true" — whole strip off
no app-toolbar-item children — empty strip

Attributes

AttributeTypeDefaultDescription
(children)app-toolbar-item—The tools, left to right. Razor equivalent of React's items array — one child element per tool.
labelstring—Accessible name for the toolbar.
valuestring—The active tool's value. Razor is stateless per request, so this is set by the page (typically from the query string), not toggled client-side — there is no onSelect/defaultValue equivalent.
namestringgeneratedGroups the radios and names the posted field.
disabledboolfalseDisables the whole strip.

On <app-toolbar-item>: value, title, icon, disabled. On <app-toolbar-action>: title, icon, disabled — the Razor equivalent of React's actions array, rendered after a divider; wire their click in page JS since there's no onClick prop server-side.