Property
A component used to show key/value data in a consistent manner.
Props#
PropertyList
, Property
, PropertyLabel
and PropertyValue
accept all Box
properties.
PropertyList#
Prop | Type | Default | Description |
---|---|---|---|
spacing | ResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | ... 54 more ... | "-3.5"> | The space between each list item | |
stylePosition | ResponsiveValue<ListStylePosition> | Shorthand prop for listStylePosition | |
styleType | ResponsiveValue<ListStyleType> | Shorthand prop for listStyleType |
Property#
Prop | Type | Default | Description |
---|---|---|---|
colorScheme | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo" | The visual color appearance of the component | |
label | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | ||
labelWidth | ResponsiveValue<number | "px" | (string & {}) | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "2" | "3" | "4" | ... 55 more ... | "container.2xl"> | ||
size | string | The size of the Property | |
spacing | ResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | ... 54 more ... | "-3.5"> | ||
value | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| PromiseLikeOfReactNode | ||
variant | string | The variant of the Property |
Was this helpful?