Text

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

Props

color
GoabTextColor primary | secondary | light | disabled
Sets the text colour to primary, secondary, light, or disabled.
Defaults to primary.
id
string
Sets the id attribute on the element.
maxWidth
GoabTextMaxWidth
Sets the max width.
Defaults to 65ch.
size
GoabTextSize 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.
tag
GoabTextTextElement | GoabTextHeadingElement span | div | p | h1 | h2 | h3 | h4 | h5
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 primary | secondary | light | disabled
Sets the text colour to primary, secondary, light, or disabled.
Defaults to primary.
id
string
Sets the id attribute on the host element.
maxWidth
GoabTextMaxWidth
Sets the max width.
Defaults to 65ch.
size
GoabTextSize 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.
tag
GoabTextTextElement | GoabTextHeadingElement span | div | p | h1 | h2 | h3 | h4 | h5
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" | "light" | "disabled"
Sets the text colour to primary, secondary, light, or disabled.
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

Limit the width of helper text

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