Button

Spec-Sheet Button - Uppercase Tracked Label, Square Corners

01 Preview

02 Usage

One-line action button - amber primary, hairline secondary, text-only ghost; uppercase mono label with optional trailing glyph.

<Button glyph="→">View projects</Button>
<Button variant="secondary">Download CV</Button>
<Button variant="ghost" glyph="↗">GitHub</Button>

Variants: primary | secondary | ghost. Sizes: xs | sm | md. Never rounded, never shadowed. One primary per view region. xs matches the --text-2xs size of inline reference links, so a ghost xs button (e.g. a Cite action) sits inline beside them.

03 Props

Prop	Type	Default	Notes
variant	`'primary' \| 'secondary' \| 'ghost'`	`primary`	Visual weight.
size	`'xs' \| 'sm' \| 'md'`	`md`	—
glyph	`string`	—	Trailing unicode glyph, e.g. "→" or "↗"
type	`'button' \| 'submit' \| 'reset'`	`button`	Native button type. Defaults to `"button"`, not the HTML default of `"submit"` — pass `type="submit"` explicitly to submit a form.
children*	`React.ReactNode`	—	—

Also accepts every attribute of React.ButtonHTMLAttributes<HTMLButtonElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { Button } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';