Text

Provides consistent sizing, spacing, and colour to written content.

Props

color
GoabTextColor
Sets the text colour.
Defaults to primary.
id
string
Sets the id attribute on the element.
maxWidth
GoabTextMaxWidth
Sets the max width.
Defaults to 65ch.
size
GoabTextSize
Overrides the text size.
tag
GoabTextTextElement | GoabTextHeadingElement
The HTML element to render. Use semantic elements like 'h1'-'h6' for headings.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
color
GoabTextColor
Sets the text colour.
id
string
Sets the id attribute on the host element.
maxWidth
GoabTextMaxWidth
Sets the max width.
size
GoabTextSize
Overrides the text size.
tag
GoabTextTextElement | GoabTextHeadingElement
The HTML element to render. Use semantic elements like 'h1'-'h6' for headings.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
as
"span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5"
The HTML element to render. Use semantic elements like 'h1'-'h6' for headings.
Defaults to div.
color
"primary" | "secondary"
Sets the text colour.
Defaults to primary.
maxwidth
string | "none"
Sets the max width.
Defaults to 65ch.
size
"heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-2xs" | "body-l" | "body-m" | "body-s" | "body-xs"
Overrides the text size.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Examples

Ask a user for an address

Ask a user for direct deposit information

Card grid

Display user information

Error pages

Error pages preview
More info

Filter data in a table

Types

Tip
Use color='secondary' for supporting text that's less prominent than the main content.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

Screen Readers

Warning
Use semantic heading tags (h1-h5) with GoabText for proper document structure and screen reader navigation.
View old component docs