Skip to content

role button

Icon button draft v0.5.1

Triggers an action with an icon alone; its label is given to assistive technology.

An icon button performs an action, like a button, but shows only an icon: it saves room in toolbars, table rows and headers where the action is familiar enough to be recognized from its symbol. It has no visible text, so it always carries a label that assistive technology announces as its name. Like every button, it never navigates.

Playground

HTML 
<button
  type="button"
  class="ds-icon-button"
  data-emphasis="accent"
  data-intent="neutral"
  data-size="medium"
  aria-label="Add item"
>
  <span
    class="ds-icon-button__icon"
    data-part="icon"
    aria-hidden="true"
  >add</span>
</button>