Fylgja Icon Button

An icon button is a button whose content is an icon. When the icon is the only child, Fylgja squares the padding automatically, so it needs no extra classes, just an accessible name from an aria-label or a <title> in the icon.

Preview

<button type="button">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img"><title>Search</title><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</button>
<button type="button">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
	<span>New item</span>
</button>

Usage

  • Put a single <svg> (or <img>) inside the button. When the icon is the only child, Fylgja makes the padding square.
  • Name an icon-only button with either an aria-label on the button or a <title> inside the <svg> (with role="img").
  • For an icon + text button, wrap the label in a <span> so the icon is no longer the only child and the button keeps its normal horizontal padding. --btn-gap spaces the icon and text, and mark the icon aria-hidden="true" since the text names the button.
  • It inherits every --btn-* variable, so color and shape work the same as a Button.

Round

Add the .round utility to turn the square button into a circle. It sets a full border radius and a 1:1 aspect ratio, so it builds on the square padding an icon-only button already has. It comes from @fylgja/utilities, and works on any button, though a single centered icon is what suits a circle best.

<button type="button" class="btn --primary round" aria-label="Add to favorites">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
</button>

Accessibility

  • An icon-only button must have a name: an aria-label on the button, or a <title> in the <svg> with role="img".
  • Mark a purely decorative icon aria-hidden="true" (as on the icon + text button).
  • Keep the target at least 24 by 24 CSS pixels for comfortable tapping.

FAQ

Why is an icon-only button square?

When a button's only child is an <svg> or <img>, Fylgja sets its inline padding equal to its block padding, so it becomes square with no extra classes.

My icon + text button lost its side padding, why?

A bare text label is a text node, so the icon still counts as the only element child and the button squares. Wrap the label in a <span> so the icon is no longer the only child and the horizontal padding returns.

How do I name an icon-only button for screen readers?

Use an aria-label on the button, or a <title> inside the svg with role="img". Either gives the button an accessible name.