@wix/design-system

### 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).