Buttons
One primary button for the main action. Outline and ghost for the rest.
The variant says how important the action is. The label says exactly what happens.
Primary, outline and ghost buttons use the Uktupus signature slant: the control is skewed −8° and the label/icons are skewed +8° so they stay upright. Corner radius on that shape is 6px. The focus ring follows the parallelogram. Secondary, destructive and link stay rectangular.
Implemented in components/ui/button.tsx via lib/ui/slant.tsx, so every screen gets it automatically. Field-like triggers (e.g. SearchableSelect) pass slanted={false} so they stay square like inputs.
Sizes
When to use
- Primary: the one main action of a page or dialog, like “New invoice” or “Save”
- Outline: secondary actions next to it, like Cancel, Export and Print
- Ghost: toolbars, table rows and icon-only buttons
- Destructive: the confirm button inside a delete confirmation
- Link: actions inside a sentence
When not to use
- Two primary buttons on the same screen
- Vague labels like Submit, OK or Yes; use a verb and a noun
- A destructive button that deletes on the first click; confirm first
- Hand-rolling a custom slanted control — use the shared
Button(or the shared slant helpers for tabs / active nav)