Migration Information

For teams migrating from the V1 to V2 component, please refer to the migration guide for changes to the component.

Component Guide

import { Text } from '@uhg-abyss/web/ui/Text';

children

color

fontWeight

fontSize

() => {
  return (
    <Text
      color="$web.semantic.color.text.content.secondary"
      fontSize="md"
      fontWeight="regular"
    >
      Lorem ipsum dolor sit amet.
    </Text>
  );
};

Color

Use the color prop to set the color of the text. This prop accepts any valid CSS color identifieropens in a new window (RGB, HSL, named color, etc.) as well as Abyss color tokens. The default value is '$web.semantic.color.text.content.secondary'.

Color contrast

Text colors must meet the minimum 4.5:1 contrast ratio for normal text and 3:1 for large text as per WCAG 2.1 guidelinesopens in a new window.

Font size

Use the fontSize prop to change the size of the text. The available options are 'lg', 'md', 'sm', and 'xs'. The default value is 'md'.

Font weight

Use the fontWeight prop to change the weight of the text. The available options are 'bold', 'medium', and 'regular'. The default value is 'regular'.

Polymorphic component

The Text component is polymorphic, meaning that the underlying HTML element can be changed using the asElement prop. By default, the component renders as a <span>.

Text Props

Name	Type	Default	Required	Description
asElement	string | undefined	'span'		The HTML element to use for the text
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined			The text content to display
className	string | undefined			CSS class name to apply to each element within the component
color	Color | undefined	'$web.semantic.color.text.content.secondary'		The color of the text
css	CSSProperties | Partial<Record<"abyss-text-root", CSSProperties>> | undefined			Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined			Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean | undefined	false		If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
fontSize	"xs" | "sm" | "md" | "lg" | undefined	'md'		The font size of the text
fontWeight	"bold" | "regular" | "medium" | undefined	'regular'		The font weight of the text
hiddenFrom	Breakpoint | undefined			When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<"text-root", SlotPropsLeafValue>> | undefined
visibleFrom	Breakpoint | undefined			When defined, the component is hidden until the screen width reaches the specified breakpoint.

Text Classes

Class Name	Description
.abyss-text-root	The text root