button — universal action button
The single, opinionated button used across CzG projects. Three variants (primary, ghost, link), three sizes (sm/md/lg). Renders <button> for form/JS actions or <a> when href is provided — same look, semantic HTML.
Install
npx czg-ui add button@import 'components/button'; to app.scss (after base). No JS.
Requires base.
Parameters
| Param | Type | Default | Notes | ||
|---|---|---|---|---|---|
variant | string | 'primary' | primary \ | ghost \ | link |
size | string | 'md' | sm \ | md \ | lg |
type | string | 'button' | button \ | submit (ignored when href is set) | |
href | string\ | null | — | If set, renders <a> instead of <button> | |
disabled | bool | false | Adds disabled attribute (button only) | ||
label | string | — | Visible text |
Variants — when to use what
| Variant | Use for | Example |
|---|---|---|
primary | The single most important action on screen | "Odeslat objednávku" |
ghost | Secondary actions next to the primary one | "Zrušit", "Zpět" |
link | Tertiary, low-emphasis actions inline with text | "Zobrazit více" |
Rule of thumb: one primary per view. If you have two primaries, either one of them is actually a ghost, or the design needs a redesign.
Usage
{include /app/components/Button/button.latte,
variant => 'primary',
size => 'lg',
href => $presenter->link('Order:'),
label => 'Objednat'}
{include /app/components/Button/button.latte,
variant => 'ghost',
type => 'submit',
label => 'Uložit'}Accessibility
- Default
type="button"prevents accidental form submits disabledremoves the element from tab order automatically:focus-visibleoutline viacgui-focus-visiblemixin (keyboard only)
When NOT to use
- Icon-only actions — use a dedicated
icon-button(smaller hit
area, different padding, aria-label required)
- Toggle states — use a
<button aria-pressed>or a switch component