Error pages
Link
Wraps an anchor element to add icons or margins.
Props
action
string
Custom action event name to dispatch when the link is clicked.
actionArg
string
Single argument to pass with the action event. Deprecated, use actionArgs instead.
actionArgs
Record<string, unknown>
Object of arguments to pass with the action event.
color
GoabLinkColor
Sets the color theme. 'interactive' for blue, 'dark' for black, 'light' for white text.
Defaults to
interactive.
leadingIcon
GoabIconType
Icon displayed before the link text.
size
GoabLinkSize
Sets the text size and corresponding icon size.
Defaults to
medium.
testId
string
Sets a data-testid attribute for automated testing.
trailingIcon
GoabIconType
Icon displayed after the link text.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Card grid
Link to an external page
Types
This distinction matters for screen reader users who expect different behaviors, keyboard navigation patterns, and browser history.
Do
Use a button for actions that trigger functionality (submit, save, cancel). Use a link for navigation to different pages or external websites.
Don't
Don't use Button for simple navigation (use Link), toggling state (use Toggle or Checkbox), or minor utility functions (use Icon Button).
Icons
Tip
Use trailingIcon='open' for links that go to external sites so users know they're leaving the service.
Other
Tip
Use Link for navigation to other pages. Use Button for actions that change state or trigger functionality.