Button

Component preview opent in nieuw tabblad

Een icon button moet in de markup eerst het label en dan het icoon hebben staan.

<button type="button" class="dso-secondary"><span></span></button>
<button type="{{ type }}"
  {{- attributes(
    [roleDescription, 'aria-roledescription', roleDescription],
    [disabled, 'disabled'],
    [id, 'id', id],
    [ariaDescribedby, 'aria-describedby', ariaDescribedby],
    [ariaHasPopup, 'aria-haspopup', ariaHasPopup],
    [ariaExpanded, 'aria-expanded', ariaExpanded, true],
    [slot, 'slot', slot]
  ) }}
  {{ className(modifier) -}}
>
  {%- if icon and not(iconOnly) %}<dso-icon icon="{{ icon }}"></dso-icon>{% endif -%}
  <span {{ className([iconOnly, 'sr-only']) }}>{{ label }}</span>
  {%- if iconAfter or iconOnly %}<dso-icon icon="{{ iconAfter or icon }}"></dso-icon>{% endif -%}
</button>
type: button
modifier: dso-secondary