> ## Documentation Index
> Fetch the complete documentation index at: https://na-36-handover-docs-v2-into-docs-v2-dev-20260518.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Wrappers

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

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

<Card title="Back to Component Library" icon="arrow-left" href="/v2/resources/documentation-guide/component-library" arrow>
  Return to the generated component library landing page.
</Card>

## 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 {color, label} 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 {icon, label} 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**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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 {icon, label} 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**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<BadgeRow variant="text" badges={[{color: "blue", label: "video"}]} />
<BadgeRow variant="icon" items={[{icon: "globe", label: "Web"}]} />
```

<CustomDivider />

### BadgeWrapper

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

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<BadgeWrapper badges={daydreamCategoryBadges} />
<BadgeWrapper>
  <Badge color="blue">video</Badge>
  <Badge color="green">stable</Badge>
</BadgeWrapper>
```

<CustomDivider />

### BorderedBox

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

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### 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**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<CalloutWrapper type="tip" header="Are you a Solution Provider?">
  Submit a PR to add your solution here!
</CalloutWrapper>
```

<CustomDivider />

### CenteredContainer

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

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### 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**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### 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**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### 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**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### IconBadgeWrapper

Use **IconBadgeWrapper** when you need flex row wrapper for icon+label tag items. Pass an `items` array of {icon, label} 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 {icon, label} objects. Icons are uncoloured by default – pass `iconColor` to override.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<IconBadgeWrapper items={daydreamInfraTags} />
<IconBadgeWrapper items={daydreamInfraTags} iconColor="var(--lp-color-accent)" />
```

<CustomDivider />

### 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**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |