Skip to main content

Data Point

This is the <DataPoint /> component.

Examples​

Price$25.00
<DataPoint label="Price">$25.00</DataPoint>
Price$25.00
<DataPoint label="Price" appearance="secondary">$25.00</DataPoint>
Price$25.00
<DataPoint label="Price" appearance="tertiary">$25.00</DataPoint>
DateMay 1
<DataPoint label="Date" lowerCase>May 1</DataPoint>

Basic Usage​

import DataPoint from '@candy/kitkat/data-point'

export const MyComponent = () => {
  return <DataPoint label="Price">$25.00</DataPoint>
}

Props​

  • appearance
    • primary (default)
    • secondary
    • tertiary
  • children (value)
  • label
  • lowerCase (boolean) is uppercase by default