Button
Triggers an action or event, such as submitting a form, opening a dialog or saving changes.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="row">
<button type="button" class="px-btn">Save changes</button>
<button type="button" class="px-btn px-btn--secondary-gray">Cancel</button>
<button type="button" class="px-btn px-btn--secondary"><svg class="px-icon" aria-hidden="true">…</svg>New project</button>
<button type="button" class="px-btn px-btn--tertiary">Learn more</button>
</div>Usage
- Use one Primary button per view for the main action.
- Start labels with a verb: “Save changes”, “Invite teammate”.
- Use Danger only for actions that delete or cannot be undone.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Variants
Five variants, the same as the Figma “Variant” property. Pick the lowest emphasis that still makes the action clear.
<div class="row">
<button type="button" class="px-btn">Primary</button>
<button type="button" class="px-btn px-btn--secondary-gray">Secondary</button>
<button type="button" class="px-btn px-btn--tertiary-brand">Ghost</button>
<button type="button" class="px-btn px-btn--tertiary">Tertiary</button>
<button type="button" class="px-btn px-btn--destructive">Danger</button>
</div>Sizes
md 40px (default), sm 36px and xs 32px, as in Figma. md and sm use a 12px radius, xs 8px.
<div class="row">
<button type="button" class="px-btn">Medium</button>
<button type="button" class="px-btn px-btn--sm">Small</button>
<button type="button" class="px-btn px-btn--xs">Extra small</button>
</div>With icon
Icons sit at the start or end (Figma “Icon start” and “Icon end”).
<div class="row">
<button type="button" class="px-btn"><svg class="px-icon" aria-hidden="true">…</svg>Add member</button>
<button type="button" class="px-btn px-btn--secondary-gray">Continue<svg class="px-icon" aria-hidden="true">…</svg></button>
<button type="button" class="px-btn px-btn--sm px-btn--tertiary-brand"><svg class="px-icon" aria-hidden="true">…</svg>Edit</button>
</div>Icon only
Square buttons in every size (Figma “Icon only = True”). They need an aria-label.
<div class="row">
<button type="button" class="px-btn px-btn--icon" aria-label="Add"><svg class="px-icon" aria-hidden="true">…</svg></button>
<button type="button" class="px-btn px-btn--sm px-btn--icon px-btn--secondary-gray" aria-label="Edit"><svg class="px-icon" aria-hidden="true">…</svg></button>
<button type="button" class="px-btn px-btn--xs px-btn--icon px-btn--tertiary" aria-label="Delete"><svg class="px-icon" aria-hidden="true">…</svg></button>
</div>Pending and disabled
Click the first button. aria-busy shows a spinner and blocks repeat clicks.
<div class="row">
<button type="button" class="px-btn" data-px-loading="Saving…">Save changes</button>
<button type="button" class="px-btn" aria-busy="true"><span class="px-spinner px-spinner--sm" aria-hidden="true"></span>Publishing…</button>
<button type="button" class="px-btn" disabled>Disabled</button>
<button type="button" class="px-btn px-btn--secondary-gray" disabled>Disabled</button>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-btn | class | Base class. Primary variant, md size. |
px-btn--secondary-gray | class | Figma “Variant = Secondary”. |
px-btn--tertiary-brand | class | Figma “Variant = Ghost”. |
px-btn--tertiary | class | Figma “Variant = Tertiary”. |
px-btn--destructive | class | Figma “Variant = Danger”. |
px-btn--sm · --xs | class | Size (Figma “Size”): sm 36px, xs 32px. md 40px is the default. |
px-btn--icon | class | Square icon-only button (Figma “Icon only = True”). |
px-btn--block | class | Full width. |
aria-busy="true" | attribute | Pending state. Put a .px-spinner inside. |
disabled | attribute | Disabled state. |
Figma properties
Button300 variants · page “Buttons”Open
Buttons trigger actions. Hierarchy: Primary (one per view) · Secondary (brand outline) · Secondary gray (neutral outline) · Secondary brand (brand tint) · Tertiary / Tertiary brand (text buttons with …
| Property | Type | Values |
|---|---|---|
| Label | Text | “Button” |
| Icon start | Boolean | — |
| Icon end | Boolean | — |
| Icon start swap | Instance swap | — |
| Icon end swap | Instance swap | — |
| Variant | Variant | Primary Secondary Ghost Tertiary Danger |
| Size | Variant | md sm xs |
| State | Variant | Default Hover Pressed Focused Disabled |
| Icon only | Variant | False True |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-button-gap | control-gap | 8px |
--px-button-md-height | spacing-40 | 40px |
--px-button-md-padding-x | spacing-16 | 16px |
--px-button-md-radius | radius-12 | 12px |
--px-button-md-icon | spacing-20 | 20px |
--px-button-sm-height | spacing-36 | 36px |
--px-button-sm-padding-x | spacing-12 | 12px |
--px-button-sm-radius | radius-12 | 12px |
--px-button-sm-icon | spacing-16 | 16px |
--px-button-xs-height | spacing-32 | 32px |
--px-button-xs-padding-x | spacing-12 | 12px |
--px-button-xs-radius | radius-8 | 8px |
--px-button-xs-icon | spacing-16 | 16px |
Accessibility
- Use a real <button>; Enter and Space activate it.
- Icon-only buttons need aria-label.
- Focus ring is two rings: surface gap + brand, 3:1 against any background.