Box
Groups and separates content (notes in prose, cards in grids, dialog bodies).
Properties
| Property | Attribute | Description | Type name | Type | Default |
|---|---|---|---|---|---|
spacing | spacing | Inner padding (`none`, `xs`, `s`, `m`, `l`, `xl`; default `m`) | DuoBoxSpacing | Exclude<DuoSpacing, "xxs" | "xxl"> | "m" |
paper | paper | Applies the surface background color | boolean | boolean | false |
rounded | rounded | Applies component corner radius | boolean | boolean | false |
dropShadow | drop-shadow | Applies a small elevation shadow | boolean | boolean | false |
flex | flex | Sets the internal wrapper display to flex | boolean | boolean | false |
Slots
| Name | Description |
|---|---|
default | Default content inside the box |
Usage
A Box is mainly used to group and separate content. This content can be a message or note within text, a card in a grid, or the inner part of a dialog.