Skip to main content

Text
ready
Storybook

The Text component can be used to apply typography styles in a simple way, without the need for extra CSS.

Usage​

When to use​

  • To display text with styles applied consistently across the product, and to provide structure to each page.

When not to use​

  • If there is any direct interaction between the text and the user, a more suitable component should be used such as Button, TextLink, Menu, etc.

Do's​

  • Headings should be organized hierarchically.
  • When a heading needs to have the appearance of another heading rank but it will affect the page heading hierarchy, use the variant prop to modify its style instead.
  • Use weight or italics for emphasis.

Don’ts​

  • Do not use the element prop simply for its appearance, use it to organize the structure of the page.
  • Do not use color for emphasis as colors are linked to states such as error, success, disabled, etc.
  • Do not use the code variant for anything other than code snippets.
  • Avoid using p as the element prop if the Text has nested components as it may break the DOM nesting rules.

Content​

The content of the text should be written according to the Grafana writing style guide.

Formatting​

The following is the default behavior and as such, it will be applied according to its type.

Anatomy​

The Text component mainly comprises itself. On occasion, the Text component can have another Text or TextLink component as a child.

Loading...
Live Editor
<Text color="primary">
  If you need more help of how to write in Grafana you can go to our{' '}
  <TextLink href="https://grafana.com/docs/writers-toolkit/" external>
    Writer’s Toolkit
  </TextLink>
  .
</Text>

Behaviour​

The Text component can be truncated. However, the default rendered element for the Text component (when no value is set in the element prop) is <span>. This is an inline container that must have a parent, which may or may not be another Text component. Therefore, truncation must be applied to the parent element.

  1. If the parent element is a Text component: the user simply needs to set the element prop to a different value and set the truncate prop to true. As a result, the Text will be truncated, but the full text will be visible in a tooltip when a user hovers over it.
Loading...
Live Editor
<Text color="primary" element="p" truncate>
  And Forrest Gump said: <Text italic>Life is like a box of chocolates. You never know what you're gonna get.</Text>
</Text>
  1. If the parent element is not a Text component: the user needs to add overflow: hidden, text-overflow: ellipsis, and whiteSpace: 'nowrap' to it. In this scenario, the user should wrap this container with a Tooltip so that when the text is truncated, its content can still be viewed by hovering over the text.
Loading...
Live Editor
<Tooltip content="This is an example of a span element truncated by its parent container">
  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
    <Text color="primary" variant="body">
      {'This is an example of a span element truncated by its parent container.'}
    </Text>
  </div>
</Tooltip>

Accessibility​

  • There should be only one h1 heading per page.
  • Headings should be organized according to their significance: h1 has the rank 1 while h6 heading has the rank 6. For instance, h1 can be used for the page heading, h2 for the titles of sections, and h3 for subsections.
  • The ranking of headings should be continuous. An h2 should not be immediately followed by an h5, but an h2 can follow an h5 if this is closing the previous section. Skipping heading ranks should be avoided as much as possible because it can be confusing.

Playground​