# Text

Text is used to visually style and provide semantic value for a small piece of text content.

```tsx
import {
  reactExtension,
  Text,
  BlockStack,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <BlockStack inlineAlignment="center">
      <Text size="extraSmall">Total</Text>
      <Text size="small">Total</Text>
      <Text size="base">Total</Text>
      <Text size="medium">Total</Text>
      <Text size="large">Total</Text>
      <Text size="extraLarge">Total</Text>
    </BlockStack>
  );
}

```

```js
import {extension, Text, BlockStack} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const text = root.createComponent(BlockStack, undefined, [
    root.createComponent(Text, {size: 'extraSmall'}, 'Total'),
    root.createComponent(Text, {size: 'small'}, 'Total'),
    root.createComponent(Text, {size: 'base'}, 'Total'),
    root.createComponent(Text, {size: 'medium'}, 'Total'),
    root.createComponent(Text, {size: 'large'}, 'Total'),
    root.createComponent(Text, {size: 'extraLarge'}, 'Total'),
  ]);

  root.appendChild(text);
});

```

## TextProps

### TextProps

### accessibilityRole

value: `TextAccessibilityRole`

Set the semantic of the component’s content

### accessibilityVisibility

value: `AccessibilityVisibility`

Changes the visibility of the element to assistive technologies.

`hidden` hides the component from assistive technology (for example, a screen reader) but remains visually visible.

### appearance

value: `Extract<
    Appearance,
    | 'accent'
    | 'subdued'
    | 'info'
    | 'success'
    | 'warning'
    | 'critical'
    | 'decorative'
  >`

Changes the visual appearance

### emphasis

value: `Emphasis`

Use to emphasize a word or a group of words.

### id

value: `string`

Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action.

### size

value: `TextSize`

Size of the text

### visibility

value: `Visibility`

Changes the visibility of the element.

`hidden` visually hides the component while keeping it accessible to assistive technology, such as screen readers. Hidden elements don't take any visual space contrary to CSS visibility: hidden;

## Related

- [Heading](heading)
- [HeadingGroup](headinggroup)
- [TextBlock](textblock)