Skip to main content

​
Example Text

The Example Text component displays sample input or example values in a visually distinct style. Use Example Text to show users what they should type or to display example values in documentation.

​
Installation

yarn add @twilio-paste/example-text

​
Usage

import { ExampleText } from '@twilio-paste/example-text';

const MyComponent = () => (
  <ExampleText>HTTPBin echoes data in your HTTP request back to you</ExampleText>
);

​
Props

​
ExampleText Props

PropTypeDefaultDescription
elementstring'EXAMPLE_TEXT'Overrides the default element name to apply unique styles with the Customization Provider.

​
Styling Details

The Example Text component has the following default styles:
  • Renders as <samp> (sample output) with an inner <kbd> (keyboard input) element
  • display: inline-block
  • backgroundColor: colorBackground
  • fontFamily: fontFamilyText
  • fontWeight: fontWeightMedium
  • fontSize: fontSize30
  • lineHeight: lineHeight40
  • borderRadius: borderRadius20
  • paddingX: space30

​
Examples

​
Basic Example Text

<ExampleText>HTTPBin echoes data in your HTTP request back to you</ExampleText>

​
Inline with Paragraph

<Paragraph>
  To create your account, provide your full name, a valid email address, and a
  secure password. Your password must contain at least eight characters,
  including uppercase letters, lowercase letters, numbers, and a special
  character. For example, <ExampleText>Password123!</ExampleText> is a strong
  option. You may be asked to verify your email address by clicking a link sent
  to your inbox.
</Paragraph>

​
Customization

The Example Text component can be customized using the Customization Provider: 
<CustomizationProvider
  theme={theme}
  elements={{
    CUSTOMIZED_EXAMPLE_TEXT_WRAPPER: {
      padding: 'space30',
      backgroundColor: 'colorBackgroundBrand10',
      borderRadius: 'borderRadius30',
    },
    CUSTOMIZED_EXAMPLE_TEXT: { 
      fontFamily: 'fontFamilyCode' 
    },
  }}
>
  <ExampleText element="CUSTOMIZED_EXAMPLE_TEXT">
    HTTPBin echoes data in your HTTP request back to you
  </ExampleText>
</CustomizationProvider>

​
Customizable Elements

The following element names are available for customization:
  • {element}_WRAPPER: The outer <samp> element
  • {element}: The inner <kbd> element
For example, if you use element="EXAMPLE_TEXT" (the default):
  • EXAMPLE_TEXT_WRAPPER: Outer wrapper
  • EXAMPLE_TEXT: Inner content

​
Use Cases

  • Displaying example user input in forms
  • Showing sample commands or keyboard shortcuts
  • Demonstrating example values in documentation
  • Highlighting placeholder text examples
  • Showing API response examples

​
Semantic HTML

Example Text uses two semantic HTML elements:
  • <samp>: Represents sample or quoted output from a computer program
  • <kbd>: Represents user input from a keyboard or other input device
This combination semantically indicates example text that a user might type or see as output.

​
Accessibility

  • Uses semantic HTML elements (<samp> and <kbd>) for proper meaning
  • The background color provides visual distinction while maintaining readability
  • Text remains selectable and copyable
  • Works well with screen readers due to semantic markup

Build docs developers (and LLMs) love

Get started for freeTalk to us