Button

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<button class="aparte-btn aparte-btn--primary aparte-btn--solid">Send</button>
<button class="aparte-btn aparte-btn--danger aparte-btn--outline">Delete</button>
<button class="aparte-btn aparte-btn--icon" aria-label="Copy">
  <aparte-icon name="copy"></aparte-icon>
</button>
<div class="aparte-btn-group" role="group" aria-label="Versions">
  <button class="aparte-btn aparte-btn--surface" aria-label="Previous"><aparte-icon name="prevBranch"></aparte-icon></button>
  <button class="aparte-btn aparte-btn--surface">1 / 2</button>
  <button class="aparte-btn aparte-btn--surface" aria-label="Next"><aparte-icon name="nextBranch"></aparte-icon></button>
</div>
<div class="aparte-btn-group" role="group" aria-label="View">
  <button class="aparte-btn aparte-btn--primary aparte-btn--outline" aria-pressed="true">Chat</button>
  <button class="aparte-btn aparte-btn--primary aparte-btn--outline" aria-pressed="false">Preview</button>
</div>

The button. Ready-made classes; nothing to configure.

TWO AXES, and keeping them apart is the whole design. An INTENT says which colour the button means; a FILL says what to do with that colour. Seven intents times five fills is thirty-five buttons out of twelve classes, and every combination works because neither axis knows about the other.

An intent on its own is a ghost — the quietest form, and the one a chat uses most. Add a fill when the button has to carry more weight.

.aparte-btn-group fuses adjacent buttons into ONE control: the inner corners drop, the shared borders overlap, and only the group’s ends keep the radius. Give the wrapper role="group" and a name — visually one control, it should read as one too. A SEGMENTED control is the same group with one segment selected: mark it aria-pressed="true" (or aria-selected="true" under role="tablist") and it is painted solid in the group’s intent, at rest — not only under the pointer.

This layer is NEUTRAL: it is what a UI library offers, not a summary of what this repo happens to use. A variant nothing wears still ships, because the plugin that needs it is not written yet, and its absence is what makes an author invent a seventh shade of orange.

Your own class stays on the element, for events and for targeting. It just stops carrying the look.

Classes

.aparte-btn · .aparte-btn--block · .aparte-btn--circle · .aparte-btn--danger · .aparte-btn--ghost · .aparte-btn--icon · .aparte-btn--info · .aparte-btn--lg · .aparte-btn--neutral · .aparte-btn--outline · .aparte-btn--pill · .aparte-btn--primary · .aparte-btn--secondary · .aparte-btn--sm · .aparte-btn--soft · .aparte-btn--solid · .aparte-btn--success · .aparte-btn--surface · .aparte-btn--warning · .aparte-btn--xl · .aparte-btn-group · .aparte-btn__icon · .aparte-icon

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.