OActionBar

OActionBar shows the actions that apply to the current selection, such as deleting or archiving the checked rows of a table. It names the selection with a title that screen readers announce when it changes, and can float above the page bottom.

Usage

Step by step

1. Import OActionBar from the ooko-ui/action-bar public subpath.
2. Set title to describe the selection, such as "3 selected", and put the action buttons in the default slot.
3. Bind visible to whether something is selected, and set fixed to pin the bar to the bottom of the viewport instead of the document flow.

Example

The rendered example and its source come from the same Vue single-file component.

Invoice.pdf

Contract.docx

Logo.svg

1 selected

Interactive playground

Edit the title, show or hide the bar, and pin it to the bottom of the viewport.

3 items selected

Title Visible Fixed

Props

Prop	Type	Default	Description
title	string	undefined	Text describing the current selection, such as "3 items selected". It names the bar and is announced when it changes.
fixed	boolean	false	Pins the bar to the bottom of the viewport instead of rendering it in the document flow.
visible	boolean	true	Shows the bar. Hiding it keeps its content mounted so title changes are still announced once it reappears.

Events

Event	Payload	Description
none	none	No custom Vue events are emitted.

Slots

Slot	Props	Description
title	none	Replaces the title prop text inside the announced title.
default	none	Provides the actions, usually buttons, that apply to the selection.

CSS custom properties

Custom property	Default	Description
--o-action-bar-padding	var(--o-space-2)	Sets the inner spacing of the bar.
--o-action-bar-gap	var(--o-space-2)	Sets the spacing between the title and the actions, and between actions.
--o-action-bar-border	1px solid var(--o-border-color-subtle)	Sets the bar border shorthand.
--o-action-bar-border-radius	var(--o-radius-surface)	Sets the bar corner radius.
--o-action-bar-background	var(--o-background-color-default)	Sets the bar background.
--o-action-bar-offset	var(--o-space-5)	Sets the distance between a fixed bar and the viewport edges.
--o-action-bar-max-width	48rem	Sets the maximum inline size of a fixed bar.
--o-action-bar-shadow	0 var(--o-space-2) var(--o-space-6) var(--o-action-bar-shadow-color)	Sets the shadow of a fixed bar.

Override example

:root {
  --o-action-bar-background: var(--o-background-neutral-subtle);
  --o-action-bar-border: 0;
  --o-action-bar-offset: var(--o-space-8);
  --o-action-bar-max-width: 40rem;
}

Define the same custom properties on a container instead of :root to limit an override to one part of an application.

Accessibility

• The root is a group named by the title through aria-labelledby. Without a title, forward aria-label to name it; every attribute is forwarded to the root.
• The title is a polite live region, so a change such as "2 selected" to "3 selected" is announced without moving focus.
• The bar adds no keyboard handling of its own: its actions are native buttons reached with Tab in document order. It deliberately avoids the toolbar role, which would require arrow-key navigation between actions.
• The bar never moves focus when it appears or disappears. A fixed bar can cover the bottom of the page, so leave enough space below scrollable content for its last items to stay reachable.
• The enter and leave transition is removed when reduced motion is requested.
• Forced-colors mode receives an explicit border even when --o-action-bar-border is 0.

Behavior and edge cases

• visible toggles the bar with display: none; its content stays mounted so the live title keeps announcing changes. Use v-if instead when the actions should not exist at all.
• The title slot replaces the title prop text inside the announced title; the title wrapper is omitted when neither is provided.
• A fixed bar is centered, limited to --o-action-bar-max-width, kept --o-action-bar-offset away from the viewport edges, and stacked below notifications.
• Unlike the legacy toast actions, the bar is not a toast: it has no duration, queue, or close button. Clearing the selection is an action you provide in the default slot.
• The bar emits no events and has no app defaults.