ReactNode
Property
A component used to show key/value data in a consistent manner.
A Property
can be used to format different kinds of data throughout your app.
It can be used in cards, lists, etc.
Import#
PropertyList
: Render a list of properties.Property
: The wrapper component that handles default composition.PropertyLabel
: The property label.PropertyValue
: The property value.
import {PropertyList,Property,PropertyLabel,PropertyValue,} from '@saas-ui/react'
Usage#
Basic Property#
<Property label="Name" value="Elliot Alderson" />
Label width#
Label text will be truncated if it doesnt fit.
<Property label="Billing plan" value="Professional" labelWidth="80px" />
Property with icon#
<Property label={<EmailIcon />} value="hello@saas-ui.dev" labelWidth="32px" />
Property list#
<PropertyList><Property label="Name" value="Elliot Alderson" /></PropertyList>
Property card#
<Cardtitle="Billing details"action={<Button colorScheme="green" variant="solid">Upgrade</Button>}><CardBody><PropertyList><Propertylabel="Billing plan"value={<Text fontWeight="bold">Professional</Text>}/><Property label="Billing period" value="Yearly" /><Property label="Renewal date" value="01-01-2023" /><Propertylabel="Users"value={<Box flex="1"><Text fontSize="sm">20/100</Text>{' '}<Progressvalue="20"size="xs"colorScheme="primary"borderRadius="full"/></Box>}/><Property label="Price" value="€1250,-" /></PropertyList></CardBody></Card>
Editable property#
<PropertyList><Propertylabel="Name"value={<Editable defaultValue="Eelco"><EditablePreview /><EditableInput /></Editable>}/><Propertylabel="Status"value={<Select value="Open"><MenuItemOption value="Open">Open</MenuItemOption><MenuItemOption value="Closed">Closed</MenuItemOption></Select>}/></PropertyList>
Props#
PropertyList
, Property
, PropertyLabel
and PropertyValue
accept all Box
properties.
label
label
Type
labelWidth
labelWidth
Type
ResponsiveValue<Union<number | "px" | (string & {}) | "inherit" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "2" | "3" | ... 56 more ... | "min-intrinsic">>
spacing
spacing
Type
ResponsiveValue<Union<number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | ... 55 more ... | "-3.5">>
value
value
Type
ReactNode
Was this helpful?