'/%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}
Navigation
AppLauncher
The grid of apps behind a button in the header, to jump between the products of a suite.
import { AppLauncher } from '@alea/ui';
Examples
AppLauncher
The apps of a suite in a grid behind one button; arrows move between them, Enter opens one.
Lumen
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent-strong…--alea-accent-subtle…--alea-surface-hover…--alea-surface-raised…--alea-text…
Space
--alea-space-1…--alea-space-2…--alea-space-3…
Radius
--alea-radius-md…--alea-radius-sm…
Type
--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-duration-fast…--alea-motion-ease-emphasized…
Props
AppLauncher props
The grid of apps behind a button in the header, to jump between the products of a suite. A navigation of links: arrows move in the grid, Tab leaves it.
| Prop | Type | Default | Description |
|---|---|---|---|
appsrequired | AppLauncherItem[] | - | The apps, in order. |
aria-label | string | - | Name of the button. Default "Apps". |
columns | number | 3 | Columns in the grid. Default 3. |
moreHref | string | - | A link at the bottom: "More apps". |
placement | "bottom end" | "bottom start" | "bottom" | 'bottom end' | Where the grid opens. Default bottom end. |
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
placementbottom endbottom startbottom- States
- Hover (CSS)
- 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-apps-popover.alea-apps.alea-app.alea-app-icon.alea-app-label.alea-apps-more
Accessibility
- The button is named ("Apps") and opens a dialog with a navigation landmark of links.
- Arrow keys move through the grid, Home and End jump, Tab leaves it; focus starts on the first app.
- Every app is a real link with a visible label; the icon is decoration.
Keyboard
| Key | Does |
|---|---|
| Enter or Space (on the button) | Opens the grid |
| Arrow keys | Move through the apps |
| Enter | Opens the app |
| Escape | Closes and returns focus to the button |
Do and don't
Do
- Keep the order stable so people learn where things are.
- Put the most used apps first, and the rest behind More apps.
Don't
- Don't use it for the sections of one app: that is the navigation.
- Don't show icons without labels.
In Figma
AppLauncher button and grid with a slot per app.