Skip to Content
OUI
GitHub

Infobox

An Infobox informs users of important information of a higher hierarchy. They are non-dismissable, and are not triggered by user action.

GitHubSourceGitHubThemeStorybookStorybook

Usage

This is an informational message to help guide your users.

Sizes

Use the size prop to change the size of the infobox. Defaults to md.

Small infobox with compact spacing and smaller icon.
Medium infobox with comfortable spacing and larger icon.

Variants

Use the variant prop to change the visual style and semantic meaning of the Infobox. Defaults to info.

  • info: Informational messages with helpful tips or guidance
  • warning: Warning messages to alert users about potential issues
  • error: Error messages indicating something went wrong
  • success: Success messages confirming an action was completed
Informational message with helpful tips or guidance.
Warning message to alert users about potential issues.
Error message indicating something went wrong.
Success message confirming an action was completed.

Custom icon

By default, Infobox displays an appropriate icon based on the variant prop. You can override this by providing a custom icon using the icon prop.

Use a custom icon to better match your message content.
Custom icons automatically inherit the variant color and size.

Hidden icon

You can hide the icon by setting icon to null.

Text-only infobox without an icon for a cleaner look.
Sometimes the colored background is sufficient without an icon.

Multiline content

Infobox supports rich content including formatted text, lists, and multiple paragraphs. The icon will stay aligned at the top while content wraps naturally.

Pro tip: You can include formatted content like bold text, links, and multiple sentences to provide comprehensive guidance to your users.
Action required: Your session will expire in 5 minutes.
  • Save your work to avoid losing changes
  • Extend your session if needed
  • Log in again if your session expires

Slots

Infobox has the following slots:

  • base: The main container element
  • icon: The icon element (default or custom)

Custom Styles

You can customize the Infobox component by passing custom Tailwind CSS classes to the component slots using the classNames prop.

Customize the appearance using the classNames prop to match your design system.

Accessibility

  • The Infobox uses semantic colors to communicate meaning visually
  • Icons provide additional visual reinforcement of the message type
  • Ensure text content is clear and concise for all users
  • The component uses appropriate semantic HTML structure
GitHubEdit page