Button
The primary action control — an ink pill with an uppercase mono label.
Install
pnpm dlx shadcn@latest add @namche/buttonUsage
import { Button } from '@/components/ui/button';
<Button>Deploy cluster</Button>
<Button variant="outline">Cancel</Button>variant is default | secondary | outline | ghost | destructive | link.
size is default | xs | sm | lg | icon | icon-xs | icon-sm | icon-lg. default
paints the brand's ink pill — --gaia-erebos background, --gaia-selene text,
uppercase Namche Shadow Mono label — so it is the one to reach for as the
primary action. Every other variant names its own text colour rather than
inheriting it, because the design tokens style bare <a> elements; that keeps
the label visible even when the button renders as a link through render.
Base UI's Button takes a render prop instead of asChild for polymorphic
composition:
import Link from 'next/link';
<Button render={<Link href="/docs">Documentation</Link>} />