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

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

render('Checkout::Dynamic::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 {extend, Text, BlockStack} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::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

### size
Size of the text
### emphasis
Use to emphasize a word or a group of words.
### accessibilityRole
Set the semantic of the component’s content
### id
Unique identifier. Typically used as a target for another component’s controls
to associate an accessible label with an action.
### appearance
Changes the visual appearance
### 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;
### 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.
### TextSize

Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'
### Size

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
### Emphasis
Use to emphasize a word or a group of words.
'italic' | 'bold'
### TextAccessibilityRole

'address' | 'deletion' | 'marking' | {type: 'abbreviation'; for?: string} | {type: 'directional-override'; direction: 'ltr' | 'rtl'} | {type: 'datetime'; machineReadable?: string} | 'stress' | 'offset' | 'strong'
### Appearance

'accent' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
### Visibility

'hidden'
### AccessibilityVisibility

'hidden'
## Related
- [Heading](heading)
- [HeadingGroup](headinggroup)
- [TextBlock](textblock)