'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Actions
SelectionBar
A bar that appears while items are selected: the count, actions on the selection and a way to clear it. Floating at the bottom of the screen, or inline over a list or table.
import { SelectionBar } from '@alea/ui';
Examples
Selection
Select some files: the bar slides in with the count and the actions, Escape or the X clears. variant="inline" puts it over the list instead of floating at the bottom of the screen.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent…--alea-accent-subtle…--alea-chip-bg…--alea-chip-text…--alea-text…
Space
--alea-space-2…--alea-space-6…
Radius
--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-weight-semibold…
Shadow
--alea-shadow-pop…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Layer
--alea-z-sticky…
Props
SelectionBar props
A bar that appears while items are selected, with the count, actions on them and a way to clear the selection. A toolbar (one Tab stop group of actions); the count is announced as it changes; Escape clears.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | Actions on the selection: Archive, Delete, Move (small Buttons or IconButtons). |
countrequired | number | - | How many items are selected; at 0 the bar hides. |
onClearrequired | () => void | - | Clears the selection (the X button and Escape). |
className | string | - | Extra class names. |
label | ((count: number) => ReactNode) | - | The text with the count. Default "3 selected". |
variant | "inline" | "floating" | 'floating' | floating (centered at the bottom of the screen, default) or inline (where you put it, like a toolbar over a table). |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
variantinlinefloating- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-selbar.alea-selbar-inner.alea-selbar-count.alea-selbar-sep.alea-selbar-actions- Data attributes
data-variant=floatingdata-variant=inlinedata-visible
Accessibility
- A toolbar named "Selection"; its count is a status, so screen readers hear "3 selected" as it changes.
- Escape clears the selection; the clear button is named.
- While nothing is selected the bar is hidden and inert, so it never takes a Tab stop.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through the actions |
| Escape | Clears the selection |
Do and don't
Do
- Name actions for what they do to the selection: Archive, Move to, Delete.
- Put destructive actions last, and confirm them.
Don't
- Don't show more than four or five actions: put the rest in a More menu.
- Don't cover the content people are selecting: leave space at the bottom of the page.
In Figma
SelectionBar with Variant (Floating, Inline), a count and an actions slot.