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

import { Property, PropertyLabel, PropertyValue } from '@saas-ui/react'
function BasicProperty() {
return (
<Property>
<PropertyLabel>Name</PropertyLabel>
<PropertyValue>Elliot Alderson</PropertyValue>
</Property>
)
}

Label width

Label text will be truncated if it doesnt fit.

The default width is 30% with a min-width of 100px. When you set a width, the min-width will be ignored.

import { Property, PropertyLabel, PropertyValue } from '@saas-ui/react'
export default function PropertyLabelWidth() {
return (
<Property>
<PropertyLabel width="40px">Billing plan</PropertyLabel>
<PropertyValue>Professional</PropertyValue>
</Property>
)
}

Property with icon

import { Property, PropertyLabel, PropertyValue } from '@saas-ui/react'
import { FiMail } from 'react-icons/fi'
export default function PropertyWithIcon() {
return (
<Property>
<PropertyLabel width="24px">
<FiMail />
</PropertyLabel>
<PropertyValue>hello@saas-ui.dev</PropertyValue>
</Property>
)
}

Property list

import {
PropertyList,
Property,
PropertyLabel,
PropertyValue,
} from '@saas-ui/react'
export default function List() {
return (
<PropertyList>
<Property>
<PropertyLabel>Name</PropertyLabel>
<PropertyValue>Elliot Alderson</PropertyValue>
</Property>
<Property>
<PropertyLabel>Role</PropertyLabel>
<PropertyValue>Hacker</PropertyValue>
</Property>
<Property>
<PropertyLabel>Birthday</PropertyLabel>
<PropertyValue>September 17, 1986</PropertyValue>
</Property>
</PropertyList>
)
}

Property card

import {
Card,
CardHeader,
CardBody,
Heading,
Button,
Text,
Box,
Progress,
Spacer,
} from '@chakra-ui/react'
import { PropertyList, Property } from '@saas-ui/react'
export default function PropertyCard() {
return (
<Card>
<CardHeader display="flex" flexDirection="row">
<Heading size="sm">Billing details</Heading>
<Spacer />
<Button colorScheme="green" variant="solid">
Upgrade
</Button>
</CardHeader>
<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

import { Editable, EditablePreview, EditableInput } from '@chakra-ui/react'
import {
PropertyList,
Property,
Select,
SelectButton,
SelectList,
SelectOption,
} from '@saas-ui/react'
export default function Editable() {
return (
<PropertyList>
<Property
label="Name"
value={
<Editable defaultValue="Eelco" width="200px">
<EditablePreview
display="flex"
alignItems="center"
px="3"
fontSize="sm"
w="full"
minH="8"
_hover={{ bg: 'gray.100', borderRadius: 'md', cursor: 'pointer' }}
_dark={{
_hover: {
bg: 'whiteAlpha.100',
},
}}
/>
<EditableInput size="xs" />
</Editable>
}
/>
<Property
label="Status"
value={
<Select value="Open">
<SelectButton width="200px" size="md" variant="ghost" />
<SelectList>
<SelectOption value="Open">Open</SelectOption>
<SelectOption value="Closed">Closed</SelectOption>
</SelectList>
</Select>
}
/>
</PropertyList>
)
}

Was this helpful?