AeontelAeontel Docs

Button

Primary button primitive with sized variants.

Usage

TSX
import { Button } from "@aeontel/ui";

<Button onClick={handleClick}>New agent</Button>
<Button variant="outline" size="sm">Cancel</Button>
<Button variant="destructive">Delete workspace</Button>

Exports

Button

Primary button element.

TypeScript
Button(props: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): JSX.Element

Props

PropTypeDefaultDescription
variant?"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined"default"
size?"default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined"default"

buttonVariants

cva variant builder for button classNames.

Heights, paddings, and gaps reference token aliases (--control-h-*, --control-px-*, --control-gap-*) that resolve via the density cascade — compact (web default, ~32px) vs comfortable (mobile, 44px). Mount <DensityProvider value="comfortable"> on a subtree (or the mobile <VariableContextProvider>) to flip the cascade.

TypeScript
buttonVariants(config?: { variant?: ButtonVariant; size?: ButtonSize; className?: string }): string