# 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`

  - TextAccessibilityRole: 'address' | 'deletion' | 'marking' | {type: 'abbreviation'; for?: string} | {type: 'directional-override'; direction: 'ltr' | 'rtl'} | {type: 'datetime'; machineReadable?: string} | 'stress' | 'offset' | 'strong'
Set the semantic of the component’s content

### accessibilityVisibility

value: `AccessibilityVisibility`

  - AccessibilityVisibility: 'hidden'
  - Visibility: 'hidden'
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'
  >`

  - Appearance: 'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
Changes the visual appearance

### emphasis

value: `Emphasis`

  - Emphasis: 'italic' | 'bold'
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`

  - TextSize: Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'
  - Size: 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
Size of the text

### visibility

value: `Visibility`

  - Visibility: 'hidden'
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)