Text

Used to render text and paragraphs within an interface.

This feature is only available to users on the Business Plan. To upgrade, visit your billing settings.

import { Strong, Text, TextLink } from '@/components/text'

function Example() {
  return (
    <Text>
      This feature is only available to users on the <Strong>Business Plan</Strong>. To upgrade, visit your{' '}
      <TextLink href="#">billing settings</TextLink>.
    </Text>
  )
}

Examples

Basic example

Use the Text component for any custom paragraph text that should match the style of the text built in to your other components:

Deleting your account is permanent, and your data will not be able to be recovered.

import { Text } from '@/components/text'

function Example() {
  return <Text>Deleting your account is permanent, and your data will not be able to be recovered.</Text>
}

Paragraphs using Text are responsive and automatically adapt to dark mode.

With link

Use the TextLink component for any links within a Text component:

Deleting your account is permanent, and your data will not be able to be recovered. If you still want to use this account in the future, learn about pausing your subscription instead.

import { Text, TextLink } from '@/components/text'

function Example() {
  return (
    <Text>
      Deleting your account is permanent, and your data will not be able to be recovered. If you still want to use this
      account in the future, learn about <TextLink href="#">pausing your subscription</TextLink> instead.
    </Text>
  )
}

With strong

Use the Strong component for any text you want to emphasize within a Text component:

Deleting your account is permanent, and your account data cannot be recovered.

import { Strong, Text } from '@/components/text'

function Example() {
  return (
    <Text>
      Deleting your account is permanent, and <Strong>your account data cannot be recovered</Strong>.
    </Text>
  )
}