Diagrams
DiagramToolbar
A bar of actions belonging to the surface underneath them.
Ships from@misoto22/design/diagrams
When to reach for it
Examples
default
Notes
A bar of actions that belong to the surface underneath them.
The package already has FloatingIconButton for ONE pinned action. This is the container for several — which is a different problem, because several pinned buttons need to read as one object rather than as a scatter: one plate, one border, hairlines between the groups, and a single role="toolbar" so a screen reader announces a toolbar instead of six unrelated buttons.
role="toolbar" also changes the keyboard contract, and callers should know what they are opting into: arrow keys are expected to move between the controls and Tab is expected to leave the bar. This component does not implement roving focus for you — a bar of three buttons where Tab visits all three is honest and fine — so pass placement="inline" and skip the role by using a plain <div> if that is not what you want.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| labelrequired | string | — | |
| align | 'start' | 'end' | 'end' | Which corner a floating bar pins to. |
| placement | 'inline' | 'floating' | 'inline' | Where it sits. `floating` pins it over the surface it acts on. |
Also accepts everything in Omit<ComponentProps<'div'>, 'children'>. Those are forwarded to the underlying element and are not listed row by row.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
DiagramToolbarGroup
One run of related controls inside the bar.
Separated by a hairline rather than by space, because a gap large enough to read as a group boundary is also large enough to stop the bar reading as one object — which is the whole reason the controls were collected into a bar.
Takes no props of its own.
Accessibility
- role="toolbar" announces a toolbar rather than six unrelated buttons. It does not implement roving focus — Tab visits every control, which is honest for a bar of three.