Actions

Button

Primary in ink, outlined secondary, ghost, accent and icon-only, in three sizes.

CSS only

Example

<button type="button" class="u-btn u-btn--primary">Save</button>
<button type="button" class="u-btn u-btn--secondary">See details</button>
<button type="button" class="u-btn">Default</button>
<button type="button" class="u-btn u-btn--ghost">Cancel</button>
<button type="button" class="u-btn u-btn--accent">Publish</button>
<button type="button" class="u-btn u-btn--primary" disabled>Disabled</button>

Installation

Button ships in the full package, in unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

No build It's just CSS: with unslop.css on the page, the classes already work.

Sizes

Small is 32px tall, medium 40px and large 48px. For a standalone control on mobile, prefer large.

<button type="button" class="u-btn u-btn--primary u-btn--sm">Small</button>
<button type="button" class="u-btn u-btn--primary">Medium</button>
<button type="button" class="u-btn u-btn--primary u-btn--lg">Large</button>

Icon only

Square, with the same height as the chosen size. With no visible text, aria-label is required.

<button type="button" class="u-btn u-btn--icon" aria-label="Add"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
<button type="button" class="u-btn u-btn--primary u-btn--icon" aria-label="Continue"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></button>
<button type="button" class="u-btn u-btn--ghost u-btn--icon u-btn--sm" aria-label="Add"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>

Classes and variants

Class	What it does
`u-btn`	Base: 40px tall, tile background and a light outline.
`u-btn--primary`	Main action, in ink. Doesn't change with the accent.
`u-btn--secondary`	Outline, transparent background.
`u-btn--ghost`	No background or outline, secondary text.
`u-btn--accent`	Background in the current accent.
`u-btn--sm`	32px tall.
`u-btn--lg`	48px tall.
`u-btn--icon`	Square, icon only.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
disabled	native attribute	Fades it and blocks the pointer.
`aria-disabled="true"`	on the button or link	Same look as disabled, without removing it from focus.
`aria-label`	on `u-btn--icon`	The button's name when there's no text.

Keyboard

Key	Does
Tab	focuses the button
Enter or Space	activates it (native button)