Import

import { UsageCount } from '@contentful/f36-components';
// or
import { UsageCount } from '@contentful/f36-usage-count';

Examples

Default UsageCount example of `periodic` variant.

function UsageCountExample() {
  return (
    <UsageCount
      variant="periodic"
      value={150}
      valueUnit="GB"
      periodType="year"
    />
  );
}

Open in Playground

UsageCount example of `consumption` variant.

function UsageCountConsumptionExample() {
  return (
    <UsageCount
      variant="consumption"
      value={150}
      valueDescription="consumption units per year"
    />
  );
}

Open in Playground

UsageCount example of `entitlement` variant.

function UsageCountExample() {
  return (
    <UsageCount
      variant="entitlement"
      value={150}
      valueUnit="GB"
      quota={200}
      includedLabel="included"
    />
  );
}

Open in Playground

Props (API reference)

Open in Storybook

Name	Type	Default
variant required	"consumption" "periodic" "entitlement"
className	string CSS class to be appended to the root element
includedLabel	string
periodType	"month" "year"
quota	string number
testId	string A [data-test-id] attribute used for testing purposes
value	string number
valueDescription	string
valueUnit	string

Import

Examples

Default UsageCount example of periodic variant.

UsageCount example of consumption variant.

UsageCount example of entitlement variant.

Props (API reference)

Name

Type

Default

Help improve this page

Default UsageCount example of `periodic` variant.

UsageCount example of `consumption` variant.

UsageCount example of `entitlement` variant.