A row of buttons, toggles, links, and menus that takes one Tab stop.
import { Toolbar } from '@oztix/roadie-components/toolbar'
Each part renders a Roadie component you already know. Toolbar.Button is a Button at emphasis='subtler', and the toolbar sits in a normal surface, a pill that hugs its items, so a row of buttons reads as one control.
size sets the buttons and links the toolbar renders, using the Button sizes.
emphasis sets the surface behind the toolbar: normal by default, subtle, raised or floating for a toolbar over other content, and subtler for none, when the toolbar sits inside another surface such as a Card. The buttons stay at subtler on every surface.
A disabled Toolbar.Button stays in the arrow order, so a keyboard user still finds it. disabled on Toolbar.Group, Toolbar.ToggleGroup, or the toolbar disables every item inside it, and they stay in the arrow order too. A Toolbar.Button with an href takes its own disabled, which keeps it in the arrow order and stops the click, but a disabled group or toolbar leaves it active. Disable it too, or remove it, when it shouldn't be followed.
Toolbar.Toggle is a Toggle at the toolbar's size that turns a setting on and off. Toggles in a Toolbar.ToggleGroup share one value: give each a value, and one is pressed at a time, or several with multiple. A Toolbar.Button whose only child is an icon renders square, as an IconButton, so give it an aria-label. Pass Toolbar.Button to Menu.Trigger with render to open a menu.
Every part takes the toolbar's size. Anything passed to render keeps its own props instead, so set size on it to match. With one value pressed at a time, a Toolbar.ToggleGroup's fill slides from toggle to toggle, as in ToggleGroup; with multiple, each pressed toggle fills itself. Use it here rather than ToggleGroup, whose own track and smaller items wouldn't match the toolbar.
Give Toolbar.Button an href and it renders a link, as Button does: an internal href routes through the Link given to RoadieProvider, and an external one opens in a new tab. It stays in the arrow order with the buttons.
With orientation='vertical' the items stack in a column as wide as the widest, and separators run across it.
On a touch screen, or a screen narrower than md, the items stay on one row and scroll sideways, with the edges fading while there's more to see. Elsewhere they wrap onto new lines, and the pill becomes a rounded box. Arrow keys scroll the focused item into view either way.
Toolbar.Group and separate the groups with Toolbar.Separator.Card, a pane header, or a bar that already has a surface, use emphasis='subtler' so the toolbar doesn't draw a box within a box. Use floating for a toolbar over content, such as on an image.Menu.className or style. Both go on the surface, the toolbar's outermost element. It's at most as wide as its container, so space it with the container's padding or gap rather than a margin, which pushes a full-width toolbar past the edge.Field, grows to fit unless it has min-w-0.Toolbar.Toggle for an on and off state. It reports whether it's pressed; a Toolbar.Button only runs an action. Put toggles that pick one of a set, such as alignment, in a Toolbar.ToggleGroup.Toolbar.Button to a Menu.Trigger, Popover.Trigger, or Tooltip.Trigger with render, so it keeps the toolbar's look and arrow order.role='toolbar' with aria-orientation. Give it an aria-label, or point aria-labelledby at a visible heading.Tab moves into the toolbar and out again in one stop. Arrow keys move between items (ArrowLeft and ArrowRight, or ArrowUp and ArrowDown when vertical). Focus wraps from the last item to the first unless loopFocus is false.Toolbar.Button keeps focus, with aria-disabled, so a screen reader still announces it.Toolbar.Separator renders role='separator', running across the toolbar.The orientation of the toolbar.
Defaults to horizontal.
If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.
Defaults to true.
Classes for the toolbar's surface, its outermost element.
The size of the buttons and links the toolbar renders. A `render` element keeps its own size.
Defaults to 'md'.
The surface behind the toolbar. `subtler` has none, for a toolbar inside another surface. The buttons stay at `subtler` on every one.
Defaults to 'normal'.
Inherited from HTMLAttributes
Override the auto `rel='noopener noreferrer'` default on external hrefs.
CSS class applied to the element, or a function that returns a class based on the component's state.
Pass a URL to render the button as a routed anchor instead of a `<button>`. Internal hrefs route through the configured `RoadieLinkProvider` (or fall back to plain `<a>`); external hrefs (`http(s)://`, `//…`) render as `<a target='_blank' rel='noopener noreferrer'>`; `mailto:` / `tel:` / `sms:` render as plain `<a>`. Pair with `external`, `target`, or `rel` to override the defaults.
Force external-link treatment regardless of `href` shape. Useful for first-party URLs that should still open in a new tab, or for an `https://` URL that should route internally through the provider.
Override the auto `target='_blank'` default on external hrefs.
Download the `href` instead of navigating, optionally as this filename.
Inherited from ToolbarButtonProps
When `true` the item is disabled.
Defaults to false.
When `true` the item remains focusable when disabled.
Defaults to true.
Inherited from NativeButtonProps
Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
Defaults to true.
Inherited from HTMLAttributes
Override the auto `rel='noopener noreferrer'` default on external hrefs.
CSS class applied to the element, or a function that returns a class based on the component's state.
Inherited from ToolbarGroupProps
When `true` all toolbar items in the group are disabled.
Defaults to false.
Inherited from HTMLAttributes
Override the auto `rel='noopener noreferrer'` default on external hrefs.
CSS class applied to the element, or a function that returns a class based on the component's state.
Inherited from ToolbarSeparatorProps
The orientation of the separator. Defaults to the opposite of the toolbar's orientation, so a horizontal toolbar renders vertical separators.
Inherited from HTMLAttributes
Override the auto `rel='noopener noreferrer'` default on external hrefs.
A `Toggle` in the toolbar's arrow order, at its size. In a `Toolbar.ToggleGroup`, give it a `value`.
CSS class applied to the element, or a function that returns a class based on the component's state.
Emphasis at rest. Pressed steps up: `normal` and `subtle` to `strong`, `subtler` to a soft fill with a strong icon or label.
Defaults to subtler.
Sets the colour palette. Inherits from the surrounding intent when unset.
Inherited from ToggleProps
Whether the component should ignore user interaction.
Defaults to false.
A unique string that identifies the toggle when used inside a toggle group.
Whether the toggle button is currently pressed. This is the controlled counterpart of `defaultPressed`.
Whether the toggle button is currently pressed. This is the uncontrolled counterpart of `pressed`.
Defaults to false.
Callback fired when the pressed state is changed.
Inherited from HTMLAttributes
Override the auto `rel='noopener noreferrer'` default on external hrefs.
Inherited from NativeButtonProps
Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
Defaults to true.
Toolbar toggles that share one value. With one pressed at a time, its fill slides between them, as in `ToggleGroup`; with `multiple`, each fills itself.
CSS class applied to the element, or a function that returns a class based on the component's state.
Inherited from ToggleGroupProps
The pressed state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the uncontrolled counterpart of `value`.
Whether the toggle group should ignore user interaction.
Defaults to false.
The pressed state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the controlled counterpart of `defaultValue`.
Callback fired when the pressed states of the toggle group changes.
When `false` only one item in the group can be pressed. If any item in the group becomes pressed, the others will become unpressed. When `true` multiple items can be pressed.
Defaults to false.
Inherited from HTMLAttributes
Override the auto `rel='noopener noreferrer'` default on external hrefs.