Document browser
Documents
Navigation and actions keep their own touch targets as the title changes.
Android app bar
A Material app bar with a title, navigation action and trailing actions in Vlak tones.
Preview
Messages
In action
When to use
Use it for
- Top-level Android screens with a title and a small set of actions.
- A medium app bar when the screen needs a larger title.
Not for
- Page navigation with more destinations than fit in an app bar.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { AndroidAppBar, AndroidAppBarAction, Icon } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/android-app-bar.
2. Vendor the source
npx @noorddev/vlak-cli add android-app-bar
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/android-app-bar.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { AndroidAppBar, AndroidAppBarAction, Icon } from "@noorddev/vlak-react";
<AndroidAppBar title="Documents" navigation={<AndroidAppBarAction aria-label="Go back" onClick={goBack}><Icon name="arrow-left" /></AndroidAppBarAction>} />Props
AndroidAppBar
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | ||
navigation | ReactNode | ||
actions | ReactNode | ||
variant | "small" | "medium" | "small" |
Also accepts Omit<HTMLAttributes<HTMLElement>, "title">.
AndroidAppBarAction
Also accepts ButtonHTMLAttributes<HTMLButtonElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves between enabled actions. |
| Enter or Space | Activates the focused action. |
Accessibility
- Uses a native header and a level-two heading.
- Label icon-only actions with aria-label.
- Action buttons keep a 48-pixel target and a visible keyboard focus indicator.
Markup
<header class="rs-android-app-bar"><div class="rs-android-app-bar-navigation"><button class="rs-android-app-bar-action" type="button" aria-label="Go back">←</button></div><h2 class="rs-android-app-bar-title">Documents</h2><div class="rs-android-app-bar-actions"><button class="rs-android-app-bar-action" type="button" aria-label="More actions">⋯</button></div></header>
Classes
.rs-android-app-bar.rs-android-app-bar-medium.rs-android-app-bar-navigation.rs-android-app-bar-title.rs-android-app-bar-leading-title.rs-android-app-bar-medium-title.rs-android-app-bar-actions.rs-android-app-bar-action