NAMCHE UI

Button

The primary action control — an ink pill with an uppercase mono label.

Install

pnpm dlx shadcn@latest add @namche/button

Usage

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>} />

On this page