Skip to main content
The ScoreCircle component displays a score value (0-100) as a circular progress indicator with color-coded status. Color is automatically applied based on the score value. Use this component to provide data visualization for use cases such as:
  • Completion percentages for tasks or projects.
  • Quality scores or performance metrics.
  • Health scores or ratings.
Three score circles in a row, with values of 85, 62, and 25.
import { ScoreCircle, Flex } from '@hubspot/ui-extensions';

hubspot.extend(() => (
  <Flex direction="row" gap="large" justify="center">
    <ScoreCircle score={85} />
    <ScoreCircle score={62} />
    <ScoreCircle score={25} />
  </Flex>
));

​
Props

PropTypeDescription
score Required

​
Score values

The component automatically validates score values and applies color-coded statuses based on the score value:
  • Success (green): score >= 66
  • Warning (yellow): score >= 33 and < 66
  • Alert (red): score < 33
The component includes automatic handling for invalid scores:
  • If the score is less than 0 or greater than 100, an error is logged and the component displays – instead of the score.
  • If the score is a decimal value, it is automatically rounded down to the nearest integer and a warning is logged.

​
Accessibility

The component includes the following accessibility features:
  • Uses the meter ARIA role to indicate a scalar measurement.
  • Provides aria-valuenow, aria-valuemin, and aria-valuemax attributes for screen readers.
  • Includes an accessible label describing the score value or error state.

​
Guidelines

  • DO: provide context around the score with additional text or labels.
  • DO: use the automatic color coding to communicate status at a glance.
  • DON’T: use ScoreCircle for values outside the 0-100 range.
Last modified on January 30, 2026