UsageCount

Import

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

Examples

Default UsageCount example of periodic variant.

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

UsageCount example of consumption variant.

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

UsageCount example of entitlement variant.

Hide code
function UsageCountExample() {
  return (
    <UsageCount variant="entitlement" value={150} valueUnit="GB" quota={200} />
  );
}
Open in Playground