NavButton
NavButton — Prism component.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
NavButton — Prism component.
Accessibility
Fully keyboard operable: Tab to focus, Enter/Space to activate. The visible focus ring uses --focus-ring — never remove it. Provide an accessible label (aria-label) for icon-only controls.
Import
const { NavButton } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
icon | React.ReactNode | — | The icon node (Lucide <svg>). |
label | React.ReactNode | — | Destination label. |
orientation | "vertical" | "horizontal" | — | vertical stacks icon over label (tab bar); horizontal is icon + label (rail). |
isActive | boolean | — | Marks the current destination (tinted + aria-current="page"). |
badge | React.ReactNode | boolean | — | A count (number/string) or a bare dot (true) shown on the icon. |
onPress | (e: React.MouseEvent) => void | — | |
onClick | (e: React.MouseEvent) => void | — | |
className | string | — |