Components
Button
Use for actions that trigger a mutation or event. Not for labels, navigation, or status.
Preview
Rendered with live Cognition tokens — toggle the theme and it remaps, no dark: classes.
Variants
<Button>Button</Button><Button variant="secondary">Secondary</Button><Button variant="outline">Outline</Button><Button variant="destructive">Delete</Button><Button variant="ghost">Ghost</Button><Button variant="link">Link</Button>States
<Button disabled>Disabled</Button><Button loading loadingText="Saving…">Save</Button>loading is a built-in prop — it shows a spinner and disables the button. Don't add an external spinner.
API
Prop
Type
Default
Description
variant
"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
"default"
Visual style of the button.
size
"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-xs"
"default"
Height and padding; the icon sizes are square.
asChild
boolean
false
Render the child element as the button (e.g. a link), keeping the styles.
disabled
boolean
false
Dims to 50% and blocks interaction (native button prop).
Don't and Do
Don't
Don't use a Button as a non-interactive label, category, or status pill — that's a Tag or a Badge.
Do
// Triggers a mutation or event
<Button onClick={save}>Save changes</Button>
<Button variant="destructive" onClick={remove}>
Delete
</Button>import { Button } from "@/components/ui/button";
export function SaveChanges() {
return <Button onClick={handleSave}>Save changes</Button>;
}Drop-in ready. Variants and Cognition tokens are baked into the component — no className needed for standard usage.