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?