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?