InfoText

import {InfoText} from '@sentry/scraps/info'; import {Flex} from '@sentry/scraps/layout';

import * as Storybook from 'sentry/stories';

export const documentation = import('!!type-loader!@sentry/scraps/info/infoText');

InfoText renders text with a dotted underline that reveals a tooltip on hover or focus. It's keyboard accessible out of the box and provides a consistent pattern for inline explanations.

<Storybook.Demo> <InfoText title="Time to First Byte measures the time from the request start until the first byte of the response is received."> TTFB </InfoText> </Storybook.Demo>

<InfoText title="Time to First Byte measures the time...">TTFB</InfoText>

Text Props

InfoText extends Text, so you can use props like size and variant to style the text.

<Storybook.Demo> <Flex gap="lg" align="center"> <InfoText title="Small muted text" size="sm" variant="muted"> Hint text </InfoText> <InfoText title="Bold text" bold> Important term </InfoText> </Flex> </Storybook.Demo>

<InfoText title="Small muted text" size="sm" variant="muted">
  Hint text
</InfoText>
<InfoText title="Bold text" bold>
  Important term
</InfoText>

Text Truncation

For truncated text, use mode="overflowOnly". This sets ellipsis and shows the tooltip only when the text overflows, while keeping the text keyboard accessible without adding an underline.

<Storybook.Demo> <Storybook.SizingWindow display="block" style={{flexGrow: 0, minWidth: 0}}> <InfoText title="Full text" mode="overflowOnly"> A long piece of text that will be truncated when the window is resized narrower </InfoText> </Storybook.SizingWindow> </Storybook.Demo>

<Storybook.SizingWindow display="block" style={{flexGrow: 0, minWidth: 0}}>
  <InfoText title="Full text" mode="overflowOnly">
    A long piece of text that will be truncated when the window is resized narrower
  </InfoText>
</Storybook.SizingWindow>

When to Use

Use InfoText to:

• Define technical terms or acronyms inline
• Provide additional context without adding visual clutter
• Create consistent, accessible inline help patterns

Prefer InfoText over wrapping text with a raw Tooltip component.

Accessibility

• Keyboard accessible: Users can Tab to focus the text and reveal the tooltip
• Focus indicator: A visible focus ring appears when focused
• Hoverable tooltip: Users can move their cursor into the tooltip to interact with its content