Wrappers

Containers that hold, group, or spatially arrange other components.

Generation Script: This file is generated from script(s): operations/scripts/generators/components/documentation/generate-component-docs.js.
Purpose: Generated component-library MDX pages derived from docs-guide/config/component-registry.json.
Run when: Component governance metadata, registry outputs, or published component-library templates change.
Important: Do not manually edit this file; run node operations/scripts/generators/components/documentation/generate-component-docs.js --fix --template-only --category wrappers.

Back to Component Library

Return to the generated component library landing page.

Wrappers

Containers that hold, group, or spatially arrange other components.

This category currently contains 10 governed export(s).

Decision Tree Excerpt

1. Fetches, embeds, or binds to external/third-party data? → integrators/
2. Part of the page’s outer structure, typically used once? → scaffolding/
3. Takes content and presents it in a formatted way? → displays/
4. Exists to hold, group, or arrange other things? → wrappers/
5. Single visual piece – no wrapping, no arranging, no fetching? → elements/

Summary Table

Component	Status	Import path	Description
BadgeRow	stable	/snippets/components/wrappers/badges/Badges.jsx	Unified badge row with variant prop. “text” renders Badge elements from a badges array. “icon” renders icon+label tags from an items array.
BadgeWrapper	stable	/snippets/components/wrappers/badges/Badges.jsx	Flex row wrapper for Badge elements. Pass a badges array of objects for auto-rendering, or use children for manual JSX.
BorderedBox	stable	/snippets/components/wrappers/containers/Containers.jsx	Bordered container with configurable radius and background.
CalloutWrapper	stable	/snippets/components/wrappers/containers/Containers.jsx	Wraps Mintlify callout types (Tip, Info, Warning, Note, Check) with a styled header and description.
CenteredContainer	stable	/snippets/components/wrappers/containers/Containers.jsx	Horizontally centred container with configurable max-width.
FlexContainer	stable	/snippets/components/wrappers/containers/Containers.jsx	Flexbox container with configurable direction, gap, and alignment.
FullWidthContainer	stable	/snippets/components/wrappers/containers/Containers.jsx	Full-viewport-width container that breaks out of parent padding.
GridContainer	stable	/snippets/components/wrappers/containers/Containers.jsx	CSS Grid container with configurable columns and gap.
IconBadgeWrapper	stable	/snippets/components/wrappers/badges/Badges.jsx	Flex row wrapper for icon+label tag items. Pass an items array of objects. Icons are uncoloured by default – pass iconColor to override.
ScrollBox	stable	/snippets/components/wrappers/containers/Layout.jsx	Scrollable container with max-height, overflow hint, and accessible region role.

Component Reference

BadgeRow

Use BadgeRow when you need unified badge row with variant prop. “text” renders Badge elements from a badges array. “icon” renders icon+label tags from an items array.. Source description: Unified badge row with variant prop. “text” renders Badge elements from a badges array. “icon” renders icon+label tags from an items array. Import path

import { BadgeRow } from '/snippets/components/wrappers/badges/Badges.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | variant | string | "text" | No | Display variant: “text” for Badge elements, “icon” for icon+label tags. | | badges | Array | | No | Array of {color, label} objects (variant="text"). | | `items` | `Array` | | No | Array of objects (variant=“icon”). | | children | React.ReactNode | | No | Manual JSX children (variant="text" fallback). | | `iconColor` | `string` | | No | Colour applied to all icons (variant=“icon”). | | size | number | 14 | No | Icon size in px (variant=“icon”). | | gap | string | "0.4rem" | No | Gap between items. | | style | object | {} | No | Inline style overrides. | | className | string | "" | No | CSS class name. |

Code example

<BadgeRow variant="text" badges={[{color: "blue", label: "video"}]} />
<BadgeRow variant="icon" items={[{icon: "globe", label: "Web"}]} />

BadgeWrapper

Use BadgeWrapper when you need flex row wrapper for Badge elements. Pass a badges array of objects for auto-rendering, or use children for manual JSX.. Source description: Flex row wrapper for Badge elements. Pass a badges array of objects for auto-rendering, or use children for manual JSX. Import path

import { BadgeWrapper } from '/snippets/components/wrappers/badges/Badges.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | badges | Array | | No | Array of {color, label} objects. Rendered automatically as Badge elements. | | `children` | `ReactNode` | | No | Manual Badge JSX. Used if badges prop is omitted. | | gap | string | "0.4rem" | No | Gap between badges. | | style | object | {} | No | Inline style overrides (merged with defaults). | | className | string | "" | No | CSS class name. |

Code example

<BadgeWrapper badges={daydreamCategoryBadges} />
<BadgeWrapper>
  <Badge color="blue">video</Badge>
  <Badge color="green">stable</Badge>
</BadgeWrapper>

BorderedBox

Use BorderedBox when you need bordered container with configurable radius and background.. Source description: Bordered container with configurable radius and background. Import path

import { BorderedBox } from '/snippets/components/wrappers/containers/Containers.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | variant | string | "default" | No | variant prop. | | padding | string | "var(--lp-spacing-4)" | No | padding prop. | | borderRadius | string | "8px" | No | border Radius prop. | | accentBar | string | "" | No | Optional accent border token applied to the left edge. | | style | object | {} | No | style prop. | | className | string | '' | No | Optional CSS class override. |

CalloutWrapper

Use CalloutWrapper when you need wraps Mintlify callout types (Tip, Info, Warning, Note, Check) with a styled header and description.. Source description: Wraps Mintlify callout types (Tip, Info, Warning, Note, Check) with a styled header and description. Import path

import { CalloutWrapper } from '/snippets/components/wrappers/containers/Containers.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | type | string | "tip" | No | Mintlify callout type: “tip”, “info”, “warning”, “note”, “check” | | header | string | | Yes | Bold header text displayed at the top of the callout | | `children` | `React.ReactNode` | | Yes | Description content below the header | | headerColor | string | "var(--lp-color-text-primary)" | No | Header text colour | | headerSize | string | "0.9rem" | No | Header font size | | className | string | "" | No | CSS class name | | style | object | {} | No | Inline style overrides |

Code example

<CalloutWrapper type="tip" header="Are you a Solution Provider?">
  Submit a PR to add your solution here!
</CalloutWrapper>

CenteredContainer

Use CenteredContainer when you need horizontally centred container with configurable max-width.. Source description: Horizontally centred container with configurable max-width. Import path

import { CenteredContainer } from '/snippets/components/wrappers/containers/Containers.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | maxWidth | string | "800px" | No | max Width prop. | | padding | string | "0" | No | padding prop. | | preset | string | "default" | No | Named width/layout preset for common documentation patterns. | | width | string | "" | No | Explicit width override. | | minWidth | string | "" | No | Explicit min-width override. | | marginRight | string | "" | No | Optional right margin override. | | marginBottom | string | "" | No | Optional bottom margin override. | | textAlign | string | "" | No | Optional text alignment override. | | style | object | {} | No | style prop. | | className | string | '' | No | Optional CSS class override. |

FlexContainer

Use FlexContainer when you need flexbox container with configurable direction, gap, and alignment.. Source description: Flexbox container with configurable direction, gap, and alignment. Import path

import { FlexContainer } from '/snippets/components/wrappers/containers/Containers.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | direction | string | "row" | No | direction prop. | | gap | string | "var(--lp-spacing-4)" | No | gap prop. | | align | string | "flex-start" | No | align prop. | | justify | string | "flex-start" | No | justify prop. | | wrap | boolean | false | No | wrap prop. | | marginTop | string | "" | No | Optional top margin override. | | marginBottom | string | "" | No | Optional bottom margin override. | | style | object | {} | No | style prop. | | className | string | '' | No | Optional CSS class override. |

FullWidthContainer

Use FullWidthContainer when you need full-viewport-width container that breaks out of parent padding.. Source description: Full-viewport-width container that breaks out of parent padding. Import path

import { FullWidthContainer } from '/snippets/components/wrappers/containers/Containers.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `backgroundColor` | `any` | | Yes | background Color prop. | | style | object | {} | No | style prop. | | className | string | '' | No | Optional CSS class override. |

GridContainer

Use GridContainer when you need cSS Grid container with configurable columns and gap.. Source description: CSS Grid container with configurable columns and gap. Import path

import { GridContainer } from '/snippets/components/wrappers/containers/Containers.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `columns` | `any` | | Yes | columns prop. | | gap | string | "var(--lp-spacing-4)" | No | gap prop. | | style | object | {} | No | style prop. | | className | string | '' | No | Optional CSS class override. |

IconBadgeWrapper

Use IconBadgeWrapper when you need flex row wrapper for icon+label tag items. Pass an items array of objects. Icons are uncoloured by default – pass iconColor to override.. Source description: Flex row wrapper for icon+label tag items. Pass an items array of objects. Icons are uncoloured by default – pass iconColor to override. Import path

import { IconBadgeWrapper } from '/snippets/components/wrappers/badges/Badges.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | items | Array | | Yes | Array of {icon, label} objects. | | `iconColor` | `string` | | No | Colour applied to all icons. Defaults to currentColor if omitted. | | size | number | 12 | No | Icon size in px. | | gap | string | "var(--lp-spacing-3)" | No | Gap between items. | | style | object | {} | No | Inline style overrides for the wrapper. | | className | string | "" | No | CSS class name. |

Code example

<IconBadgeWrapper items={daydreamInfraTags} />
<IconBadgeWrapper items={daydreamInfraTags} iconColor="var(--lp-color-accent)" />

ScrollBox

Use ScrollBox when you need scrollable container with max-height, overflow hint, and accessible region role.. Source description: Scrollable container with max-height, overflow hint, and accessible region role. Import path

import { ScrollBox } from '/snippets/components/wrappers/containers/Layout.jsx'

Metadata

• Status: stable
• Accepts: none
• Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `maxHeight` | `number` | `300` | No | max Height prop. | | `showHint` | `boolean` | `true` | No | show Hint prop. | | `ariaLabel` | `string` | `"Scrollable content"` | No | aria Label prop. | | `style` | `any` | | Yes | style prop. | | className | string | "" | No | CSS class name. |