Error pages
Icons
A simple and universal graphic symbol representing an action, object, or concept to help guide the user.
Props
type
GoabIconType | GoabIconOverridesType
The icon type to display. See GoabIconType for available icons.
ariaHidden
boolean
Sets whether the icon is hidden from assistive technologies.
Defaults to
false.
ariaLabel
string
Defines how the icon will be announced by screen readers.
fillColor
string
Sets a custom fill color for the icon. Accepts any valid CSS color value.
inverted
string | boolean
When true, inverts the icon colors for use on dark backgrounds.
opacity
number
Sets the opacity of the icon from 0 (transparent) to 1 (opaque).
Defaults to
1.
role
string
Sets the ARIA role for the icon. Use 'presentation' for decorative icons.
Defaults to
img.
size
GoabIconSize
Sets the size of the icon. Accepts numeric (1-6) or named sizes.
Defaults to
medium.
testId
string
Sets a data-testid attribute for automated testing.
theme
GoabIconTheme
Sets the icon theme. 'outline' shows stroked icons, 'filled' shows solid icons.
Defaults to
outline.
title
string
Adds an accessible title to the icon SVG. Used by screen readers.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Button with Icon
Screen Readers
Icon-only interactive elements must have an accessible label so screen reader users understand their purpose.
For IconButton: The ariaLabel prop is required.
// Good - describes the action
<GoabIconButton icon="trash" ariaLabel="Delete item" />
// Bad - no label for screen readers
<GoabIconButton icon="trash" />For Badge with icon only: Provide ariaLabel when there’s no visible text.
<GoabBadge icon="warning" ariaLabel="Warning" type="important" />For Icon: Use ariaLabel when the icon conveys meaning, not just decoration.
The label should describe:
- What action happens (for buttons): “Delete”, “Edit”, “Close”
- What the icon represents (for informational icons): “Warning”, “Success”
For decorative icons: Set ariaHidden to true when nearby text or the parent control already communicates the same meaning. This prevents screen readers from announcing duplicate information.
<GoabIcon type="checkmark-circle" ariaHidden />
<span>Application saved</span>Do not use ariaHidden to replace a missing accessible label. If the icon provides information that is not available elsewhere, use ariaLabel instead.
Don't
Don't use icon-only elements without an accessible label
