Pattern library

Icon Button

View full screen

Details

Source (Nunjucks)

<button class="w-button--icon {{ data.modifiers }}" data-icon="{{ data.icon }}">
<span class="w-tooltip" role="tooltip">{{ data.tooltip }}</span>
</button>

Output

<button class="w-button--icon " data-icon="close">
<span class="w-tooltip" role="tooltip">close</span>
</button>

Variants

Rounded

View full screen

Details

Source

<button class="w-button--icon {{ data.modifiers }}" data-icon="{{ data.icon }}">
<span class="w-tooltip" role="tooltip">{{ data.tooltip }}</span>
</button>

Output
<button class="w-button--icon w-button--round" data-icon="close">
<span class="w-tooltip" role="tooltip">close</span>
</button>