Text

Component to render text.

Example

Text

Hello world

import { UiText } from '@altdot/extension';

export default function Command() {
  return (
    <UiText>Hello world</UiText>
  );
}

Colors

Default color

Primary color

Destructive color

Muted color

import { UiText } from '@altdot/extension';

export default function Command() {
  return (
    <>
      <UiText>Default color</UiText>
      <UiText color="primary">Primary color</UiText>
      <UiText color="destructive">Destructive color</UiText>
      <UiText color="muted">Muted color</UiText>
    </>
  );
}

Heading

heading-1 variant

heading-2 variant

heading-3 variant

heading-4 variant

body variant

body-small variant

code variant

import { UiText } from '@altdot/extension';

export default function Command() {
  return (
    <UiText size="icon">
      <UiIcons.Search />
    </UiText>
  );
}

Props

Name	Type	Description
variant	'code' | 'body-small' | 'body' | 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4'	The text’s variant. Default to body
color	'primary' | 'default' | 'destructive' | 'muted'	The button’s color. Default to default