Icon / Square Button

INFO

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: Every icon button must contain a <span class="h-sr-only"> with a descriptive label for screen readers.

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][.-small, .-medium, .-large]

Preview	CSS Modifier	Description
	.-small	Compact size for dense interfaces or secondary toolbars.
	.-medium	The standard default size for most interactive elements.
	.-large	High-visibility size for primary actions or touch-friendly mobile layouts.

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	Disabled State	Color Modifier	Description
			.-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.
			.-success	Indicates a positive outcome or a confirmation action.
			.-warning	Used for cautionary actions or to highlight issues.
			.-error	Destructive actions, errors, or cancellation triggers.
—	—		.-disabled	Generic visual indicator for inactive UI elements.

---

Action Button

The Action Button is a specific use case of the Icon Button, designed to trigger an Action Menu or dropdown. It typically uses the "ellipsis" icon to indicate additional options.

c-btn.-icon-btn[any modifier] > .fa-ellipsis-v/.fa-ellipsis-h

Show Code

<div class="h-flex h-flex-row gap-s">
  <button type="button" class="c-btn  -icon-btn -inverted">
    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
    <span class="h-sr-only">Menu</span>
  </button>
  <button type="button" class="c-btn  -icon-btn -medium -link">
    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
    <span class="h-sr-only">Menu</span>
  </button>
</div>