Clickable
The button surface: one component with three exports, `Button`, `Link` and `ExternalLink`, that every clickable part of Fragiola UI composes.
npx shadcn@latest add @fragiola/clickableThree axes, none of them colour
variant (solid / ghost / outline / icon) is a fill strategy, size (sm / md) is a measure — md is h-control, so a button lines up with a field — and shape (auto / square) is a form. They are orthogonal: size="sm" shape="square" produces a small square button, which is what an addon needs. Folding form into measure is what produces a size="icon" that cannot also be small.
No axis names a colour. A destructive button is <Clickable.Button className="palette-danger" /> — there is no variant="destructive" and no tone prop. This is what keeps destructive from coming back as a hundred copies.
Links and render
Clickable.Link is a plain <a> — it has no dependency on any router. Consumers stitch Next's or TanStack's link through render, the project's single polymorphism mechanism. ExternalLink is a separate export (not a prop) because it differs in defaults and semantics (target, rel), not in appearance.
Parts
| Part | Source |
|---|---|
Button | Base UI Button + clickable() |
Link | useRender (<a>) + clickable() |
ExternalLink | useRender (<a>) + outbound defaults + clickable() |
Text
The typography primitive other components wear through `render`, so a dialog title, a field label and a menu label never grow their own class.
Field
One way to write a field, and one input. The box lives on the row; the control is only its middle. The `field` family has ten members and zero variants.