
### inline
- type: boolean
- description: Defines if the box behaves as an inline element
### direction
- type: "horizontal" | "vertical"
- description: Defines how the children are ordered (horizontally or vertically)
### children
- type: ReactNode
- description: Allows to render any component as a child item
### className
- type: string
- description: Specifies a CSS class name to be appended to the component’s root element.
- internal
### align
- type: "center" | "right" | "left" | "space-between"
- description: Defines how the children are aligned according to the X axis
### verticalAlign
- type: "top" | "bottom" | "middle" | "space-between"
- description: Defines how the children are aligned according to the Y axis
### dataHook
- type: string
- description: Accepts HTML attributes that can be used in the tests
### data-hook
- type: string
- description: Accepts HTML attributes that can be used in the tests
- deprecated
### gap
- type: BoxCssSizingProperty
- description: Sets the gaps/gutters between flex items.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.)
### border
- type: string
- description: Enables a border and sets its width and style. This prop does not include WSR color variable keys.
### style
- type: CSSProperties
- description: Sets object of CSS styles
### role
- type: "none" | string & {} | "status" | "button" | "article" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "option" | "search" | "table" | "alert" | "alertdialog" | "application" | "banner" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "grid" | "gridcell" | "group" | "heading" | "list" | "listbox" | "listitem" | "log" | "marquee" | "math" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "searchbox" | "separator" | "slider" | "spinbutton" | "switch" | "tab" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem"
- description: Sets the WAI-ARIA role attribute for accessibility. When set to 'button' or 'link', the box automatically receives tabIndex=0 for keyboard navigation.
### ariaLabel
- type: string
- description: Sets the WAI-ARIA label attribute, providing an accessible name for assistive technologies like screen readers.
### color
- type: string
- description: Sets a text color by a key from the color palette or natively supported value (Hex, RGB, etc.)
### backgroundColor
- type: string
- description: Sets a background color by a key from the color palette or natively supported value (Hex, RGB, etc.)
### borderColor
- type: string
- description: Sets a border color by a key from the color palette or natively supported value (Hex, RGB, etc.)
### borderTopColor
- type: string
- description: Sets a border top color by a key from the color palette or natively supported value (Hex, RGB, etc.)
### borderRightColor
- type: string
- description: Sets a border right color by a key from the color palette or natively supported value (Hex, RGB, etc.)
### borderBottomColor
- type: string
- description: Sets a border bottom color by a key from the color palette or natively supported value (Hex, RGB, etc.)
### borderLeftColor
- type: string
- description: Sets a border left color by a key from the color palette or natively supported value (Hex, RGB, etc.)
### margin
- type: BoxCssSizingProperty
- description: Sets margin on all sides.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
### marginTop
- type: BoxCssSizingProperty
- description: Sets margin on the top.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
### marginRight
- type: BoxCssSizingProperty
- description: Sets margin on the right.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
### marginBottom
- type: BoxCssSizingProperty
- description: Sets margin on the bottom.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
### marginLeft
- type: BoxCssSizingProperty
- description: Sets margin on the left.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
### padding
- type: BoxCssSizingProperty
- description: Sets padding on all sides.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px")
### paddingTop
- type: BoxCssSizingProperty
- description: Sets padding on the top.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
### paddingRight
- type: BoxCssSizingProperty
- description: Sets padding on the right.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
### paddingBottom
- type: BoxCssSizingProperty
- description: Sets padding on the bottom.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
### paddingLeft
- type: BoxCssSizingProperty
- description: Sets padding on the left.
Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
a spacing token (SP1, SP2, etc.) or a value in pixels
### minWidth
- type: BoxCssSizingProperty
- description: Sets the minimum width of the box in pixels
### maxWidth
- type: BoxCssSizingProperty
- description: Sets the maximum width of the box in pixels
### width
- type: BoxCssSizingProperty
- description: Sets the width of the box in pixels
### minHeight
- type: BoxCssSizingProperty
- description: Sets the minimum height of the box in pixels
### maxHeight
- type: BoxCssSizingProperty
- description: Sets the maximum height of the box in pixels
### height
- type: BoxCssSizingProperty
- description: Sets the height of the box in pixels
### ref
- type: null | string | (instance: any) => void | RefObject<any>
- description: Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).

