Create a note
- Project notes
Android floating action button
A Material floating action button with an optional extended text label.
Preview
In action
When to use
Use it for
- The principal creation action on an Android screen.
Not for
- Several equally prominent actions on one screen.
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 { AndroidFab, Icon } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/android-fab.
2. Vendor the source
npx @noorddev/vlak-cli add android-fab
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-fab.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 { AndroidFab, Icon } from "@noorddev/vlak-react";
<AndroidFab icon={<Icon name="plus" size={24} />} onClick={createDocument}>New document</AndroidFab>Props
AndroidFab
| Prop | Type | Default | Description |
|---|---|---|---|
iconrequired | ReactNode |
Also accepts ButtonHTMLAttributes<HTMLButtonElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab | Focuses the enabled action. |
| Enter or Space | Activates the action. |
Accessibility
- Uses a native button with a target of at least 56 pixels.
- Provide aria-label when omitting the visible text label.
- Does not submit a form unless type submit is explicit.
Markup
<button class="rs-android-fab rs-android-fab-extended" type="button"><span class="rs-android-fab-icon" aria-hidden="true">+</span>New document</button>
Classes
.rs-android-fab.rs-android-fab-extended.rs-android-fab-icon