Text

By default <Text> renders a <span> or a specific text element, like <i>, <kbd>, <strong>, etc. You can apply all TextVariants using the variant prop.

Usage

import { Text } from '@vtex/admin-ui'

function Example() {
  return <Text variant="headline">Headline</Text>
}

Examples

Tone of voice

Text tone of voice

Default textMuted textInfo textCritical textWarning textPositive text

Variant

PageTitleTitle 1Title 2Action 1Action 2DisplayBodyDetail

Props

All props of span jsx element.

Name	Type	Description	Required	Default
as	HTMLElementType	Element to render	🚫	'span'
variant	pageTitle, title1, title2, action1, action2, display, body, detail	Text variant. Consumes the text pattern	🚫	body
tone	primary, secondary, info, critical, warning, positive	Text Tone of voice	🚫	primary