Infobox
A non-dismissable callout for important information surfaced at a higher hierarchy than inline help text. Not triggered by user action.
import { Infobox } from "@opengovsg/oui"export const Example = () => { return ( <Infobox> This is an informational message to help guide your users. </Infobox> )}Usage
Use Infobox for prominent, non-dismissable information that should persist on the page (e.g., "Your account is pending verification"). Use Banner for page-level announcements that may be dismissable. Use Toast for transient, time-limited feedback triggered by user actions.
import { Infobox } from "@opengovsg/oui"<Infobox>This is an informational message to help guide your users.</Infobox>Alternatively, install the component as local source via the shadcn CLI:
npx shadcn@latest add https://oui.open.gov.sg/r/infobox.jsonpnpm dlx shadcn@latest add https://oui.open.gov.sg/r/infobox.jsonnpx shadcn@latest add https://oui.open.gov.sg/r/infobox.jsonbunx --bun shadcn@latest add https://oui.open.gov.sg/r/infobox.jsonThe Infobox component renders a styled callout with a leading icon chosen automatically by variant. It supports rich content (paragraphs, lists, inline elements) and stays visually balanced as content wraps.
Examples
Sizes
Use the size prop to change the size of the infobox. Defaults to "md".
import { Infobox } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex flex-col gap-4"> <Infobox size="sm"> Small infobox with compact spacing and smaller icon. </Infobox> <Infobox size="md"> Medium infobox with comfortable spacing and larger icon. </Infobox> </div> )}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.
import { Infobox } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex flex-col gap-4"> <Infobox variant="info"> Informational message with helpful tips or guidance. </Infobox> <Infobox variant="warning"> Warning message to alert users about potential issues. </Infobox> <Infobox variant="error"> Error message indicating something went wrong. </Infobox> <Infobox variant="success"> Success message confirming an action was completed. </Infobox> </div> )}Custom icon
By default, Infobox displays an icon based on the variant prop. Override it with the icon prop.
import { AlertTriangle, Lightbulb } from "lucide-react"import { Infobox } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex flex-col gap-4"> <Infobox variant="info" icon={<Lightbulb />}> Use a custom icon to better match your message content. </Infobox> <Infobox variant="warning" icon={<AlertTriangle />}> Custom icons automatically inherit the variant color and size. </Infobox> </div> )}Hidden icon
Hide the icon entirely by passing icon={null}.
import { Infobox } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex flex-col gap-4"> <Infobox variant="info" icon={null}> Text-only infobox without an icon for a cleaner look. </Infobox> <Infobox variant="warning" icon={null}> Sometimes the colored background is sufficient without an icon. </Infobox> </div> )}Multiline content
Infobox supports rich content including formatted text, lists, and multiple paragraphs. The icon stays aligned at the top while content wraps.
import { Infobox } from "@opengovsg/oui"export const Example = () => { return ( <div className="flex flex-col gap-4"> <Infobox variant="info"> <strong>Pro tip:</strong> You can include formatted content like bold text, links, and multiple sentences to provide comprehensive guidance to your users. </Infobox> <Infobox variant="warning"> <div> <strong>Action required:</strong> Your session will expire in 5 minutes. <ul className="mt-2 ml-4 list-disc"> <li>Save your work to avoid losing changes</li> <li>Extend your session if needed</li> <li>Log in again if your session expires</li> </ul> </div> </Infobox> </div> )}Accessibility
- Infoboxes are static, non-interactive elements — they receive no focus and do not announce on mount. If a message needs to be announced when it appears (e.g., a form-level error), wrap the Infobox in a container with
role="alert"oraria-live="polite". - The leading icon is decorative; meaning is carried by the text content. Don't rely on color or icon alone to communicate severity.
- Variant choice should match the semantic meaning of the content (use
errorfor actual errors, not as a visual emphasis device).
Slots
Slots are named regions of the component you can target with custom Tailwind classes via the classNames prop. Each slot below corresponds to a key on the classNames object.
base: The root container wrapping the icon and content.icon: The leading icon element (default or custom).wrapper: The inner wrapper around the content text.
Custom Styles
You can customize the Infobox component by passing custom Tailwind CSS classes to the component slots via the classNames prop.
import { Infobox } from "@opengovsg/oui"export const Example = () => { return ( <Infobox variant="info" classNames={{ base: "bg-gradient-to-r from-purple-100 to-pink-100 border-2 border-purple-300 rounded-lg", icon: "text-purple-600", }} > Customize the appearance using the classNames prop to match your design system. </Infobox> )}Props
Infobox
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The message content. Supports rich children (paragraphs, lists, inline elements) |
variant | "info" | "warning" | "success" | "error" | "info" | Semantic meaning + visual style |
size | "sm" | "md" | "md" | Size variant |
icon | ReactNode | null | - | Override the default variant icon. Pass null to hide the icon |
classNames | SlotsToClasses<"base" | "wrapper" | "icon"> | - | Per-slot Tailwind classes for custom styling |
className | string | - | Additional Tailwind classes applied to the base slot |
Inherits standard HTML element props from HtmlUiProps (e.g., id, role, aria-*).