Buttons on Socle

Overview

Mon, 01 Jan 0001 00:00:00 +0000

Eight files: one base class, and seven single-purpose buttons.

Page	Class	Needs `.btn`
Button	`.btn`	—
Close button	`.btn-close`	no
Menu button	`.btn-menu`	no
Search button	`.btn-search`	yes
Filter button	`.btn-filter`	yes
Share button	`.btn-share`	yes
Table of contents button	`.btn-toc`	yes
Video toggle	`.btn-toggle-video`	yes

Two kinds of specialised button

Read the third column before using one, because the two kinds behave differently when the base class is missing.

Button

Mon, 01 Jan 0001 00:00:00 +0000

.btn is the base class. It works on <button>, <a> and <input type="submit">, and reads --btn-* from @uncinq/component-tokens.

<button class="btn">Send</button>
<a class="btn btn-secondary" href="/contact">Contact</a>

Variants compose freely: class="btn btn-danger btn-sm btn-ghost".

Colour variants

Class	Intent
`.btn-primary`	Primary action
`.btn-secondary`	Secondary action
`.btn-brand`	Brand-coloured
`.btn-neutral`	Neutral emphasis
`.btn-dark`	Dark surface
`.btn-light`	Light surface
`.btn-success`	Confirmation
`.btn-danger`	Destructive action
`.btn-warning`	Warning
`.btn-info`	Informational

Each sets its background, border and text colour, with their hover values.

.btn-danger {
 --btn-color-background: var(--color-danger);
 --btn-color-background-hover: var(--color-danger-hover);
 --btn-color-border: var(--color-danger);
 --btn-color-border-hover: var(--color-danger-hover);
 --btn-color-text: var(--color-on-danger);
 --btn-color-text-hover: var(--color-on-danger);
}

The text colour always comes from the matching --color-on-* semantic token, so contrast survives a change to the underlying colour. That pairing is the reason to rebrand by redefining --color-brand rather than --btn-color-background.

Close button

Mon, 01 Jan 0001 00:00:00 +0000

A close control. It is self-contained: .btn is not required.

<button class="btn-close" aria-label="Close"></button>

Its main use is the header of a panel, where it usually carries the .js-dialog-close hook as well:

<div class="header">
 <p class="title" id="contactLabel">Contact</p>
 <button class="btn-close js-dialog-close" aria-label="Close"></button>
</div>

Why it stands alone

Every property is declared twice over, with --btn-close-* falling back to the matching --btn-* token:

background-color: var(--btn-close-color-background, var(--btn-control-color-background));
border-radius: var(--btn-close-border-radius, var(--btn-border-radius));
font-size: var(--btn-close-font-size, var(--btn-font-size));

So it looks like the rest of the button family without inheriting from it, and a single --btn-close-* override retargets it alone. Its default palette is --btn-control-*, the same quiet colours as .btn-control, which is what keeps it from competing with the panel’s real actions.

Menu button

Mon, 01 Jan 0001 00:00:00 +0000

A menu toggle, typically the burger control in a header. Like .btn-close, it is self-contained: .btn is not required.

<button class="btn-menu js-dialog-toggle" data-target="#menu" aria-label="Menu"></button>

It is almost always the trigger for a drawer, which is why it usually carries .js-dialog-toggle and a data-target pointing at the panel’s id.

Same construction as the close button

Every property falls back from --btn-menu-* to the matching --btn-* token, and the default palette is --btn-control-*. See .btn-close for the full explanation, which applies here unchanged.

Search button

Mon, 01 Jan 0001 00:00:00 +0000

A search control. It requires .btn: on its own it is nothing but a colour set and an icon.

<button class="btn btn-search js-dialog-toggle" data-target="#search" aria-label="Search"></button>

What it declares

Two things, and nothing else.

The --btn-color-* set is retargeted at the control palette, with a per-button escape hatch in front of it:

--btn-color-background: var(--btn-search-color-background, var(--btn-control-color-background));
--btn-color-text: var(--btn-search-color-text, var(--btn-control-color-text));

Override --btn-search-color-* to restyle every search button, or --btn-color-* directly on one instance.

And the glyph, masked from --icon-search on ::before, sized by --btn-search-icon-size falling back to --icon-size, which .btn sets to its own font size.

Filter button

Mon, 01 Jan 0001 00:00:00 +0000

The control that opens a filters panel. It requires .btn.

<button class="btn btn-filter panel-trigger-md js-dialog-toggle"
 data-target="#filters"
 aria-label="Filters"></button>

Like .btn-search, it declares only a --btn-color-* set pointed at the control palette, with --btn-filter-color-* in front of it as the override hook, and an icon masked from --icon-filter. Everything else comes from .btn.

It usually needs a `.panel-trigger-*`

A filters panel is the textbook case for .panel-inline-*: a drawer on mobile, a sidebar column on desktop. Once the panel is a column there is nothing left to open, so the button has to go with it.

Share button

Mon, 01 Jan 0001 00:00:00 +0000

A share control. It requires .btn.

<button class="btn btn-share" aria-label="Share">Share</button>

Construction is identical to .btn-search: a --btn-color-* set pointed at the control palette, with --btn-share-color-* as the per-variant override, and the glyph masked from --icon-share.

It ships no behaviour

The class is presentation only. Whether the button calls navigator.share(), copies a URL to the clipboard or opens a dropdown of destinations is entirely up to your script.

If it opens a menu, the dropdown contract applies: the trigger needs .dropdown-toggle and .js-dropdown-toggle, and its next element sibling must be the .dropdown-menu.

Table of contents button

Mon, 01 Jan 0001 00:00:00 +0000

The control that opens a table of contents. It requires .btn.

<button class="btn btn-toc panel-trigger-lg js-dialog-toggle"
 data-target="#toc"
 aria-label="Table of contents"></button>

Construction is identical to .btn-search: a --btn-color-* set pointed at the control palette, with --btn-toc-color-* as the per-variant override, and the glyph masked from --icon-toc.

It behaves like the filter button

A table of contents follows the same responsive pattern as a filters panel: a drawer on small screens, a sticky column on large ones. Pair the panel’s .panel-inline-* with the matching .panel-trigger-* on this button, or you keep a button that opens nothing at desktop width.

Video toggle

Mon, 01 Jan 0001 00:00:00 +0000

A play and pause control overlaid on a video. It requires .btn, and it is the one specialised button that ships no icon of its own.

<div class="video">
 <video autoplay muted loop playsinline></video>
 <button class="btn btn-toggle-video is-playing" aria-label="Pause">
 <span class="icon-pause"></span>
 <span class="icon-play"></span>
 </button>
</div>

Why it exists

A video that autoplays without native controls must be pausable to meet WCAG. This button is that pause control. If your video carries controls, you do not need it.

Buttons on Socle

Overview

Two kinds of specialised button

Button

Colour variants

Close button

Why it stands alone

Menu button

Same construction as the close button

Search button

What it declares

Filter button

It usually needs a .panel-trigger-*

Share button

It ships no behaviour

Table of contents button

It behaves like the filter button

Video toggle

Why it exists

It usually needs a `.panel-trigger-*`