Button

Preview Code

375 768 Full

Open

html

<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>

.aparte-btn on a <button> gives it the look of the chat’s own buttons: the send button, the copy button, the approval options. Two axes make every button. An intent says what the colour means (primary, neutral, success, warning, danger, info, secondary); a fill says how loudly (solid, soft, outline, surface, or none, which is the quiet ghost a chat uses most). Any intent works with any fill.

.aparte-btn-group fuses neighbouring buttons into one control, the way the ‹ 1/2 › picker and the site’s own Preview/Code switch are drawn.

Variants

Fills and intents

Preview Code

375 768 Full

Open

html

<!-- A style (solid, soft, outline, surface, ghost) and a tone (primary, neutral, danger…) combine freely. -->
<p>
  <button class="aparte-btn aparte-btn--primary aparte-btn--solid" type="button">Solid</button>
  <button class="aparte-btn aparte-btn--primary aparte-btn--soft" type="button">Soft</button>
  <button class="aparte-btn aparte-btn--primary aparte-btn--outline" type="button">Outline</button>
  <button class="aparte-btn aparte-btn--surface" type="button">Surface</button>
  <button class="aparte-btn aparte-btn--ghost" type="button">Ghost</button>
</p>
<p>
  <button class="aparte-btn aparte-btn--success aparte-btn--soft" type="button">Success</button>
  <button class="aparte-btn aparte-btn--warning aparte-btn--soft" type="button">Warning</button>
  <button class="aparte-btn aparte-btn--danger aparte-btn--soft" type="button">Danger</button>
  <button class="aparte-btn aparte-btn--info aparte-btn--soft" type="button">Info</button>
  <button class="aparte-btn aparte-btn--neutral aparte-btn--soft" type="button">Neutral</button>
</p>

Sizes and shapes

Preview Code

375 768 Full

Open

html

<p>
  <button class="aparte-btn aparte-btn--surface aparte-btn--sm" type="button">Small</button>
  <button class="aparte-btn aparte-btn--surface" type="button">Medium</button>
  <button class="aparte-btn aparte-btn--surface aparte-btn--lg" type="button">Large</button>
  <button class="aparte-btn aparte-btn--surface aparte-btn--xl" type="button">Extra large</button>
</p>
<p>
  <button class="aparte-btn aparte-btn--primary aparte-btn--solid aparte-btn--pill" type="button">Pill</button>
  <button class="aparte-btn aparte-btn--primary aparte-btn--solid aparte-btn--circle aparte-btn--icon" type="button" aria-label="Send"><aparte-icon name="send"></aparte-icon></button>
</p>
<button class="aparte-btn aparte-btn--primary aparte-btn--solid aparte-btn--block" type="button">Block, the full width</button>

--icon makes a square button for a lone glyph, --circle a round one, --pill rounds the ends, --block takes the full width.

Customize

Variable	Default
--aparte-btn-size-sm	24px
--aparte-btn-size-md	32px
--aparte-btn-size-lg	36px
--aparte-btn-size-xl	40px
--aparte-btn-gap	var(--aparte-space-2)
--aparte-btn-padding	var(--aparte-space-2) var(--aparte-space-3)
--aparte-btn-radius	var(--aparte-radius-md)
--aparte-btn-font-size	var(--aparte-font-size-md)
--aparte-btn-bg-hover	var(--aparte-surface-2)
--aparte-btn-bg-active	var(--aparte-surface-3)
--aparte-btn-bg-toggled	var(--aparte-surface-2)
--aparte-btn-color-toggled	var(--aparte-text)
--aparte-btn-size	var(--aparte-btn-size-md)
--aparte-btn-ink	var(--aparte-on-intent)
--aparte-btn-icon-size	var(--aparte-icon-size-lg)
--aparte-btn-padding-sm	var(--aparte-space-1) var(--aparte-space-2)
--aparte-btn-padding-lg	var(--aparte-space-3) var(--aparte-space-5)
--aparte-btn-intent	—
--aparte-btn-intent-ink	—
--aparte-btn-on-intent	—

A component inside a container sets the token rather than out-specifying the recipe: the composer’s row declares --aparte-btn-size and every button in it follows.

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

Accessibility

• Use a real <button> (or an <a> for a link): the classes give the look, the element gives the keyboard and the role.
• An icon-only button needs an aria-label; the glyph inside is hidden from screen readers.
• A group of buttons that acts as one control takes role="group" and a label.

Related

• Icon — the glyphs buttons carry.
• Field — the other control recipe.