Icon Buttons

Variants

Combine .icon-btn with a style and semantic color. Every button needs an accessible name. --action-color* controls primary text and outlines; --primary* controls solid surfaces.

<button class="icon-btn icon-btn-primary icon-btn-text" type="button" aria-label="Text action">
	<!-- Icon -->
</button>
<button class="icon-btn icon-btn-primary icon-btn-solid" type="button" aria-label="Solid action">
	<!-- Icon -->
</button>
<button
	class="icon-btn icon-btn-secondary icon-btn-outline"
	type="button"
	aria-label="Outline action">
	<!-- Icon -->
</button>

Sizes and state

<button
	class="icon-btn icon-btn-primary icon-btn-text icon-btn-sm"
	type="button"
	aria-label="Small action">
	<!-- Icon -->
</button>
<button
	class="icon-btn icon-btn-primary icon-btn-solid"
	type="button"
	aria-label="Disabled action"
	disabled>
	<!-- Icon -->
</button>

CSS Variables

--icon-button-color: var(--text-color);
--icon-button-color-hover: var(--text-color);
--icon-button-color-active: var(--text-color);
--icon-button-on-color: var(--on-primary);
--icon-button-surface-color: var(--icon-button-color);
--icon-button-surface-color-hover: var(--icon-button-color-hover);
--icon-button-surface-color-active: var(--icon-button-color-active);
--icon-button-bg-color: transparent;
--icon-button-border-color: transparent;
--icon-button-highlight: var(--bg-highlight);
--icon-button-border-width: var(--border-width);
--icon-button-border-radius: 9999px;
--icon-button-size: 2.5rem;
--icon-button-padding: var(--spacer-1);
--icon-button-svg-size: 1.125rem;
--icon-button-disabled-text-color: var(--disabled-text-color);
--icon-button-disabled-bg-color: var(--disabled-bg-color);
--icon-button-disabled-border-color: var(--disabled-border-color);
--icon-button-focus-outline-width: var(--focus-outline-width);
--icon-button-focus-outline-style: var(--focus-outline-style);
--icon-button-focus-outline-color: var(--focus-outline-color);
--icon-button-focus-outline-offset: var(--focus-offset);
--icon-button-transition-duration: var(--transition-duration);
--icon-button-transition-easing: var(--transition-easing);