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#

<Card
title="Billing details"
action={
<Button colorScheme="green" variant="solid">
Upgrade
</Button>
}
>
<CardBody>
<PropertyList>
<Property
label="Billing plan"
value={<Text fontWeight="bold">Professional</Text>}
/>
<Property label="Billing period" value="Yearly" />
<Property label="Renewal date" value="01-01-2023" />
<Property
label="Users"
value={
<Box flex="1">
<Text fontSize="sm">20/100</Text>{' '}
<Progress
value="20"
size="xs"
colorScheme="primary"
borderRadius="full"
/>
</Box>
}
/>
<Property label="Price" value="€1250,-" />
</PropertyList>
</CardBody>
</Card>

Editable property#

<PropertyList>
<Property
label="Name"
value={
<Editable defaultValue="Eelco">
<EditablePreview />
<EditableInput />
</Editable>
}
/>
<Property
label="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

Type
ReactNode

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

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

Type
ReactNode

Was this helpful?