Button

softkiwi.games has no buttons to copy - its only interactive elements are text links. So the button is derived from the brand rather than lifted from it, and the derivation is the highlight variant.

Reference

`sk-button`

Works on <button> and on <a>. On an anchor, drop the type attribute and use aria-disabled rather than disabled, which anchors do not support.

<button class="sk-button" type="button">
  Label
</button>

Attribute	Type	Default	Notes
`data-variant`	`"solid" \| "neutral" \| "quiet" \| "highlight" \| "danger"`	`"solid"`	solid is kiwi fill with an ink label; highlight is the brand swash.
`data-size`	`"sm" \| "md" \| "lg"`	`"md"`	Heights come from the shared control tokens, so sizes line up across components.
`data-block`	`"true"`	-	Fills the container. Omit the attribute for an inline button; data-block="false" is not a thing.
`disabled`	`boolean attribute`	-	On an <a>, use aria-disabled="true" and remove href instead.
`aria-busy`	`"true"`	-	In-flight state. Set disabled at the same time so the request cannot be double-fired.
`aria-pressed`	`"true" \| "false"`	-	Makes it a toggle. Inside sk-button-group the pressed segment takes the action colours.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	The binding defaults to button, not submit, so a Cancel next to a Save cannot post the form by accident.

`sk-button-spinner`

The in-flight indicator. A child of the button, drawn in CSS - no asset, no icon font.

<button class="sk-button" aria-busy="true" disabled>
  <span class="sk-button-spinner" aria-hidden="true"></span>
  Label
</button>

Examples

Variants

Solid is kiwi fill with an ink label. Never white on kiwi - that pairing is 1.6:1.

Show markup

<div class="sk-flex sk-flex-wrap sk-items-center sk-gap-3">
  <button class="sk-button" type="button" data-variant="solid" data-size="md">
    Save changes
  </button>
  <button class="sk-button" type="button" data-variant="neutral" data-size="md">
    Secondary
  </button>
  <button class="sk-button" type="button" data-variant="quiet" data-size="md">
    Cancel
  </button>
  <button class="sk-button" type="button" data-variant="highlight" data-size="md">
    Learn more
  </button>
  <button class="sk-button" type="button" data-variant="danger" data-size="md">
    Delete
  </button>
</div>

Highlight - the brand variant

At rest it is the marker-pen underline from the site. On hover or keyboard focus the bar grows to fill the label. Hover the buttons below, then tab through them.

Show markup

<div class="sk-flex sk-flex-wrap sk-items-center sk-gap-5">
  <button class="sk-button" type="button" data-variant="highlight" data-size="md">
    Learn more
  </button>
  <button class="sk-button" type="button" data-variant="highlight" data-size="lg">
    Read the docs
  </button>
  <button class="sk-button" type="button" data-variant="highlight" data-size="sm">
    Details
  </button>
</div>

Sizes

Heights come from the shared control tokens, so a button lines up with an input of the same size.

Show markup

<div class="sk-flex sk-flex-wrap sk-items-center sk-gap-3">
  <button class="sk-button" type="button" data-variant="solid" data-size="sm">
    Small
  </button>
  <button class="sk-button" type="button" data-variant="solid" data-size="md">
    Medium
  </button>
  <button class="sk-button" type="button" data-variant="solid" data-size="lg">
    Large
  </button>
</div>

States

Loading disables the button as well as marking it aria-busy, so an in-flight request cannot be double-fired by an impatient click.

Show markup

<div class="sk-flex sk-flex-col sk-gap-4">
  <div class="sk-flex sk-flex-wrap sk-items-center sk-gap-3">
    <button class="sk-button" type="button" data-variant="solid" data-size="md">
      Default
    </button>
    <button class="sk-button" type="button" data-variant="solid" data-size="md" disabled>
      Disabled
    </button>
    <button class="sk-button" type="button" data-variant="solid" data-size="md" aria-busy="true" disabled>
      <span class="sk-spinner" data-motion="essential" aria-hidden="true">
      </span>
      Saving
    </button>
  </div>
  <div class="sk-flex sk-flex-wrap sk-items-center sk-gap-3">
    <button class="sk-button" type="button" data-variant="neutral" data-size="md" disabled>
      Disabled
    </button>
    <button class="sk-button" type="button" data-variant="neutral" data-size="md" aria-busy="true" disabled>
      <span class="sk-spinner" data-motion="essential" aria-hidden="true">
      </span>
      Loading
    </button>
    <button class="sk-button" type="button" data-variant="danger" data-size="md" aria-busy="true" disabled>
      <span class="sk-spinner" data-motion="essential" aria-hidden="true">
      </span>
      Deleting
    </button>
  </div>
</div>

Full width

Show markup

<div class="sk-flex sk-flex-col sk-gap-3">
  <button class="sk-button" type="button" data-variant="solid" data-size="md" data-block="true">
    Primary action
  </button>
  <button class="sk-button" type="button" data-variant="neutral" data-size="md" data-block="true">
    Secondary action
  </button>
</div>

Links styled as buttons

Use ButtonLink for navigation. It renders an anchor, so middle-click and copy-link-address still work.

Foundations Card Field

Show markup

<div class="sk-flex sk-flex-wrap sk-items-center sk-gap-3">
  <a class="sk-button" href="/c/foundations" data-variant="solid" data-size="md">
    Foundations
  </a>
  <a class="sk-button" href="/c/card" data-variant="neutral" data-size="md">
    Card
  </a>
  <a class="sk-button" href="/c/field" data-variant="highlight" data-size="md">
    Field
  </a>
</div>