Lucent UI
ButtonSplitButton →
✦ LLM-ready

Button

atom

Trigger actions and navigation. Supports seven semantic variants (primary, secondary, outline, ghost, danger, danger-outline, danger-ghost), five sizes (2xs–lg), hover lift + glow animation, loading and disabled states, a trailing chevron for dropdown triggers, full-width layout, icon-only auto-sizing (renders as square when no children), transparent outline backgrounds, color-mix(transparent) neutral fills for disabled states, and a single translucent accent halo press ring.

"Add a Button from lucent-ui with variant="primary". It should trigger form submission and show a loading spinner while the request is in flight."

Usage

React / JSX
import { Button } from 'lucent-ui'

<Button variant="primary" size="md">Button</Button>

Installation

pnpm add lucent-ui

API Reference

Button props — * required

PropTypeDefaultDescription
variant"primary" | "secondary" | "outline" | "ghost" | "danger" | "danger-outline" | "danger-ghost""primary"Visual style of the button. secondary is a filled surface button; outline is a bordered button. danger-outline is a red-bordered variant for destructive actions needing visual weight; danger-ghost is red text on transparent background for low-emphasis destructive actions.
size"2xs" | "xs" | "sm" | "md" | "lg""md"Height and horizontal padding scale. 2xs (22px) for dashboard toolbars and table-inline actions; xs (26px) for compact toolbars.
loadingbooleanfalseReplaces the label with a spinner and disables interaction.
disabledbooleanfalsePrevents interaction and mutes the appearance.
chevronbooleanfalseAppends a down-chevron icon for dropdown trigger patterns.
fullWidthbooleanfalseStretches the button to fill its container.
leftIconReactNode—Icon displayed before the label.
rightIconReactNode—Icon displayed after the label.
spreadbooleanfalseSpaces content to the edges (space-between). Useful with fullWidth + rightIcon/chevron.
childrenReact.ReactNode—Button label. Omit for icon-only buttons (auto-sizes to square).
onClick() => void—Callback fired when the button is clicked.