Lucent UI
← SettingsPanelActionBarFormLayout →
✦ LLM-ready

ActionBar

pattern

Action bar header composed from Stack, Row, Breadcrumb, Text, Divider, and Button. Page header variant features breadcrumb navigation, a 3xl display title, a divider, and action buttons. Card header variant uses an uppercase label with md title and tight letter-spacing.

"Create an ActionBar using lucent-ui: Stack with Breadcrumb, a 3xl display title Row with action Buttons, and a Divider below. For card headers, use uppercase xs label + md title with tight letter-spacing."

Usage

React / JSX
import { Stack, Row, Breadcrumb, Text, Divider, Button } from 'lucent-ui'

<ActionBar Text size="3xl" Text family="base" />

Installation

pnpm add lucent-ui

API Reference

ActionBar props — * required

PropTypeDefaultDescription
Text size"md" | "lg" | "xl" | "2xl" | "3xl""3xl"Title size — 3xl for page headers, md for card headers.
Text family"base" | "mono" | "display""base"Use display for page-level titles.
Breadcrumb.Item hrefstring—Navigation link for each breadcrumb segment.