Icon Button

The Icon Button is a Button that only contains an icon. It is used for actions that are easily recognizable by their icon, such as a trash can for delete or a pencil for edit.

To improve usability, you can also add a tooltip to the button. See the Tooltip component for more information.

Implementation Guidelines / Accessibility

Implementation Guidelines

• Use the <button> tag for interactive elements and <a href="#"> for navigation.
• The HTML Button element comes with lots of inbuilt functionality, like submitting forms, which can be disabled with type="button".
• Using an HTML button means it can be reached by the tab key and activated with both a mouse and a keyboard automatically just by adding an onclick event.

• Accessibility: Always include aria-hidden="true" on the icon tag, this prevents screen readers from announcing the icon.

• Accessibility: Every button must contain either a <span class="h-sr-only"> with a descriptive label for screen readers or, alternatively, a aria-label attribute.

Disabled State

• Attribute vs. Class: For functional buttons, always use the HTML disabled attribute. This ensures the button is not only visually grayed out but also non-interactive for mouse, keyboard, and screen reader users.
• The .-disabled Class: Use the .-disabled modifier class specifically when you need to style a non-button element (like an <a> tag) as a disabled button, though using a <button> with the attribute is preferred for accessibility.
• Accessibility: Disabled buttons are often skipped by screen readers. Ensure that the context of why a button is disabled is clear to the user (e.g., through validation messages elsewhere on the page).

Button Size Modifiers

.c-btn[.-icon-btn/.-square-btn][.-extra-small, .-small, .-medium, .-large]

Preview	CSS Modifier	Description
	.-extra-small	Very small size for e.g. very decent inline buttons.
	.-small	Compact size for dense interfaces or secondary toolbars.
	.-medium	The standard default size for most interactive elements.
	.-large	= Default Size. High-visibility size for primary actions or touch-friendly mobile layouts.

Show Example Code

<button type="button" aria-label="Label" class="c-btn -icon-btn -primarylight -large">
  <span class="fas fa-star" aria-hidden="true"></span>
</button>

WARNING

Avoid mixing different button sizes within the same row or flex-container unless specifically required by the design hierarchy.

Standard Button Style Reference

This table provides an overview of the available color modifiers for both .-icon-btn and .-square-btn.

.-icon-btn	.-square-btn	Color Modifier	Description
		Default or .-primary	Main brand color for high-priority actions.
		.-primarylight	Subtle primary background; great for secondary triggers.
		.-secondary	Alternative brand color for secondary feature sets.
		.-light	Neutral gray; best for low-emphasis or utility controls.
		.-inverted	High contrast style for dark or saturated backgrounds.
		.-white -flat	Minimalist white button with no elevation or borders.
		.-link	Mimics a text link while maintaining button dimensions.
		.-link -flat	Ultra-clean link style without hover offsets.
		.-link -remove	Remove link style.

Show Example Code

<button type="button" aria-label="Label" class="c-btn -icon-btn -primarylight">
  <span class="fas fa-star" aria-hidden="true"></span>
</button>

State Modifiers

This table provides an overview of the available state modifiers for both .-icon-btn and .-square-btn. The additional border is optional.

.-icon-btn	.-square-btn	Disabled State	Color Modifier	Description
			.-success[.-has-border]	Indicates a positive outcome or a confirmation action.
			.-warning[.-has-border]	Used for cautionary actions or to highlight issues.
			.-error[.-has-border]	Destructive actions, errors, or cancellation triggers.
—	—		.-disabled	Generic visual indicator for inactive UI elements.

Show Example Code

<button type="button" aria-label="Label" class="c-btn -icon-btn -success -has-border">
  <span class="fas fa-check" aria-hidden="true"></span>
</button>