# Box

Enables you to display and style basic elements and containers in compliance with the design system's typography and spacing strategy.



## Properties



### className

> Adds the specified classes to the root element of the component.

Type: String

Required: No


### color

> Overrides the text color. You can set it to the following values:
> - `inherit` - Inherits the color from the parent element. For example, use this to style content
>      in Flashbars and to style the `empty` and `noMatch` slots of the Table and Cards components.
> - `text-label` - Specifies the text color for non-form labels. For example, use it for the key in key/value pairs.
> - `text-body-secondary` - Specifies the color for secondary text.
> - `text-status-error` - Specifies the color for error text and icons.
> - `text-status-success` - Specifies the color for success text and icons.
> - `text-status-info` - Specifies the color for info text and icon.
> - `text-status-inactive` - Specifies the color for inactive and loading text and icons.
> 
> Note: If you don't set it, the text color depends on the variant.
> 

Type: String

Valid values: `inherit | text-label | text-body-secondary | text-status-error | text-status-success | text-status-info | text-status-inactive`

Required: No


### display

> Overrides the display of the element. You can set it to the following values:
> - `block` - Specifies block display.
> - `inline` - Specifies inline display.
> - `inline-block` - Specifies inline-block display.
> - `none` - Hides the box.
> 
> Note: If you don't set it, the display depends on the variant.
> 

Type: String

Valid values: `block | inline | inline-block | none`

Required: No


### float

> Defines the floating behavior. You can set it to `left` or `right`.

Type: String

Valid values: `left | right`

Required: No


### fontSize

> Overrides the font size and line height. If not set, the font size and line height depend on the variant.

Type: String

Valid values: `body-s | body-m | heading-xs | heading-s | heading-m | heading-l | heading-xl | display-l`

Required: No


### fontWeight

> Overrides the font weight. If not set, the value depends on the variant.

Type: String

Valid values: `light | normal | bold | heavy`

Required: No


### id

> Adds the specified ID to the root element of the component.

Type: String

Required: No


### margin

> Adds margins to the element. It can be the following:
> - A single string with a size. This applies the same margin to all sides (that is, top, right, bottom, left).
> - An object specifying the size of the margin per side. The object has the following format:
> ```
> {
>   top: "size of top margin",
>   right: "size of right margin",
>   bottom: "size of bottom margin",
>   left: "size of left margin",
>   horizontal: "size of left and right margin",
>   vertical: "size of top and bottom margin",
> }
> ```
> 
> The size can be `n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`, where `n` stands for none.
> 
>  For example, `margin="s"` adds a small margin to all sides.
> `margin={{ right: "l", bottom: "s" }}` adds a small margin to the bottom and a large margin to the right.
> 

Type: BoxProps.Spacing | BoxProps.SpacingSize

Required: No


### padding

> Adds padding to the element. It can be the following:
> - A single string with a size. This applies the same padding to all sides (that is, top, right, bottom, left).
> - An object specifying the size of padding per side. The object has the following format:
> ```
> {
>   top: "size of top padding",
>   right: "size of right padding",
>   bottom: "size of bottom padding",
>   left: "size of left padding",
>   horizontal: "size of left and right padding",
>   vertical: "size of top and bottom padding",
> }
> ```
> 
> The size can be `n`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`, where `n` stands for none.
> 
>  For example, `padding="s"` adds small padding to all sides.
> `padding={{ right: "l", bottom: "s" }}` adds small padding to the bottom and large padding to the right.
> 

Type: BoxProps.Spacing | BoxProps.SpacingSize

Required: No


### tagOverride

> Overrides the default HTML tag provided by the variant.

Type: String

Required: No


### textAlign

> Defines the text alignment within the element. You can set it to `left`, `center`, or `right`.

Type: String

Valid values: `left | center | right`

Required: No


### variant

> Defines the style of element to display.
> - If you set it to `'div'`, `'span'`, `'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'p'`, `'strong'`, `'small'`, `'code'`, `'pre'`, or `'samp'`, the variant is also used as the HTML tag name.
> - If you set it to `awsui-key-label`, the component will display as a `div`.
> - If you set it to `awsui-value-large`, the component will display as a `span`.
> 
> Override the HTML tag by using property `tagOverride`.
> 

Type: String

Default: `"div"`

Valid values: `div | span | h1 | h2 | h3 | h4 | h5 | p | strong | small | code | pre | samp | awsui-key-label | awsui-value-large`

Required: No





## Slots



### children (content)

> Content of the box.









## License Summary

The documentation is made available under the Creative Commons Attribution-ShareAlike 4.0 International License. See the LICENSE file.