No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Text

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


In this documentation you can find:

  1. Usage
  2. Content
  3. Formating
    1. Anatomy
    2. Behaviour
  4. Accessibility
  5. Props table


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 straightforward interaction between the text and the user there should be a better component to use: Button, TextLink, Menu…

Do's

  • Heading should be organized in hierarchy.
  • When a heading needs to have the appearance of another heading rank but it will affect the page heading hierarchy, use variant prop to modify its style instead.
  • Use weight or italic for emphasis.
  • Use the tabular prop when numbers should have a fixed width, such as in tables.

Don'ts

  • Do not use the element prop because of its appearance, use it to organize the structure of the page.

  • Do not use color for emphasis as colors are related to states such as error, success, disabled and so on.

  • Do not use the code variant for anything other than code snippets.



Content

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

Formating

The following is the default behaviour and so, it will be applied according to its type.

Anatomy:

The Text component is mainly comprised by itself. In occasions, the Text component can have another Text or TextLink component as a child.

If you need more help of how to write in Grafana you can go to our Writer’s Toolkit

<Text color="primary" element="p"> 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>

And Forrest Gump said: Life is like a box of chocolates. You never know what you're gonna get.

<Text color="primary" element="p"> And Forrest Gump said: <Text italic>Life is like a box of chocolates. You never know what you're gonna get.</Text> </Text>

Behaviour:

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

  1. The parent element is a Text component: the user just has to set the element prop to another value and the truncate prop to true. As a result, the Text will be truncated but when the user hovers over it the full text will be seen on a tooltip.

And Forrest Gump said: Life is like a box of chocolates. You never know what you are gonna get.

<Text color="primary" element="p" truncate> And Forrest Gump said: <Text italic>Life is like a box of chocolates. You never know what you are gonna get.</Text> </Text>
  1. The parent element is not a Text component: the user has to add overflow: hidden, text-overflow: ellipsis and whiteSpace: 'nowrap' to it. In this case, the user should wrap up this container with a Tooltip, so when the text is truncated its content can still be seen hovering on the text.
This is a example of a span element truncated by its parent container.
<Tooltip content="This is a 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 a example of a span element truncated by its parent container.'} </Text> </div> </Tooltip>

Accessibility:

  • There should be just a h1 heading per page.
  • The headings should be organized regarding its importance: h1 has the rank 1 while h6 heading has the rank 6. For example, h1 can be used in the page heading, h2 for the titles of the sections and h3 for the subsections.
  • The ranking of headings should be continuous. An h2 should not be followed by an h5 but an h2 can follow an h5 if this is closing the previous section. Skipping heading ranks should be avoided where possible as it can be confusing.

Props table

NameDescriptionDefault
element
Defines what HTML element is defined underneath. "span" by default
"h1""h2""h3""h4""h5""h6""p""span"
"span"
variant
What typograpy variant should be used for the component. Only use if default variant for the defined element is not what is needed
"body""code""h1""h2""h3""h4""h5""h6"
-
weight
Override the default weight for the used variant
"medium""bold""light""regular"
-
color
Color to use for text
"info""link""primary""secondary""success""error""disabled""warning"
-
truncate
Use to cut the text off with ellipsis if there isn't space to show all of it. On hover shows the rest of the text
boolean
-
italic
If true, show the text as italic. False by default
boolean
-
tabular
If true, numbers will have fixed width, useful for displaying tabular data. False by default
boolean
-
textAlignment
Whether to align the text to left, center or right
"right""left""start""end""center""inherit""-moz-initial""initial"
-