The Detail Text component is used for small pieces of text that are secondary to body text in the hierarchy of a page. Common examples include an image caption, chart element legend, or a paragraph footnote.
Detail Text should not be used for body text, and should be reserved for small pieces of content only. It should not be used solely for its stylistic properties within other typographic elements.
The Detail Text component is a div element by default. You can modify the element in situations where a div isn’t semantically correct. For example, set as=”figcaption” if working with Detail Text inside a figure element.
If your Detail Text is used to describe another element, use an id for the Detail Text component and aria-describedby for the other element to make the connection clear.
Detail Text is not the same as alt text on images. The context and content of your usage might mean including alt text for further detail, or making alt text an empty string to prevent redundancy. Learn more about alt text and when to use it.
Use Detail Text to add a caption below an image.
Use Detail Text to add a description below primary content for extra context.
Detail Text includes a marginTop prop to remove its default top margin of space30.
Use Detail Text to add a footnote below a paragraph.
Do
Use Detail Text for small pieces of text that are not the main content of the UI, like graph legends and image captions
Don't
Don’t use Detail Text for body content. Consider using Paragraph instead.
Do
Use Detail Text semantically
Don't
Don’t use Detail Text for stylistic purposes within other typography. Consider using the Text primitive instead.