Component

Icon button

The same press, for an icon alone.

Classes

Class	Type
btn-square	Component	A square button. Pair it with btn-sm or btn-lg for the other sizes.
btn-sm	Size	Small. Use it with btn-square.
btn-lg	Size	Large. Use it with btn-square.
primary	Color	Indigo by default. Used when you set no color.
secondary	Color	Pink by default.
tertiary	Color	Teal by default.
neutral	Color	Gray by default.
success	Color	Green by default.
error	Color	Red by default.
warning	Color	Amber by default.
info	Color	Sky by default.
loading	State	An orbit of lights, because the face is square.

Colors

Give it an accessible name. Leave the svg without a size class. The button sets the icon size.

<button class="btn-square primary" type="button" aria-label="Add">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
    <path d="M12 5v14M5 12h14" />
  </svg>
</button>

Sizes

<button class="btn-square btn-sm" type="button" aria-label="Add small"></button>
<button class="btn-square" type="button" aria-label="Add"></button>
<button class="btn-square btn-lg" type="button" aria-label="Add large"></button>