ActionBar
$ npx shadcn@latest add https://lacodda.github.io/dowel/r/action-bar.jsonIt is a toolbar, and that is the whole point. Built on Base UI’s Toolbar, so the bar is one tab stop and the arrow keys move between its buttons. Without that, a reader tabbing out of the last field lands in a queue of five buttons instead of on Save — which is exactly where an action bar sits.
<ActionBar position="bottom" aria-label={t('form-actions')}> <ActionBarButton render={<Button variant="primary">{t('save')}</Button>} /> <ActionBarButton render={<Button variant="ghost">{t('cancel')}</Button>} /> <ActionBarSpacer /> <ActionBarButton render={<Button variant="danger">{t('delete')}</Button>} /></ActionBar>The buttons stay yours. ActionBarButton takes your element through
render and composes with it, so a Button keeps its variants and gains the
toolbar’s keyboard handling. This draws the strip; it does not decide what is
in it.
position is why it exists. A long form whose Save button is a thousand
pixels below the field being edited has a Save button the reader has to go
looking for. bottom and top stick; static is a strip in the flow of the
page.
The seam faces the content. Stuck at the bottom the rule is on top of the bar, at the top the other way about — a bar that drew both would read as a box. A static bar draws neither, because there is nothing to separate it from.
Name it when a page has more than one. “Formatting” and “Bulk actions” are different toolbars, and a screen reader announcing “toolbar” twice tells the reader nothing about which one they are in.
Stacking comes from the theme. A stuck bar uses --z-sticky rather than a
number invented here, so it agrees with every overlay in the set instead of
fighting one.
Props
Read from the types in ui/action-bar.tsx, the file a product copies - so the description of each prop is also what an editor shows over it there.
ActionBar
The bar.
| Prop | Type | Default | |
|---|---|---|---|
position | bottom | top | static | 'static' | |
justify | start | end | between | 'start' |
And every prop of Base UI's Toolbar.Root, passed on.
ActionBarButton
A button in the bar. Give it the set's own Button through render, so the toolbar's arrow keys reach it and the button keeps its variants.
Base UI's Toolbar.Button, unchanged under dowel's name - its props are on its own page.
ActionBarSeparator
A rule between groups of actions. Decorative, and announced as a separator rather than as a control.
Every prop of Base UI's Toolbar.Separator, passed on.
ActionBarGroup
A group of related actions inside the bar - the three alignment buttons, a pair of toggles. Groups the arrows walk as one.
Every prop of Base UI's Toolbar.Group, passed on.
ActionBarSpacer
Pushes what follows to the far end. A plain spacer, so a bar can put Cancel beside Save and everything else to the left without a wrapper.
Takes no props.
Accessibility
The examples on the stand, through axe 4.14.0 in a browser, in both themes, against WCAG 2.2 A and AA and axe's best practices: 17 rules applied and passed, and none failed. The accessibility report has every item.
History
Each release that changed ui/action-bar.tsx - the file a product copies - newest first.