Prepared Docs

Circle centers children in a round FlexBox with BorderRadius.Full. size sets width and square aspect ratio. CircleColor maps to semantic and accent backgrounds. Pass onClick (or hover handlers) to wrap with Interactable and optional interactionType / disabled.

Props

Name	Type	Default	Description
`className`	`string`	—	Additional CSS class name(s) to apply to the box element.
`color`	`CircleColor`	`CircleColor.Default`	Background color variant for the circle.
`disabled`	`boolean`	`false`	When true, disables interaction on the circle.
`interactionType`	`InteractableType`	`InteractableType.Default`	Visual style variant when the circle is interactive.
`margin`	`Spacing`	—	Outer spacing around the box. Accepts a spacing token.
`onClick`	`((e: MouseEvent<HTMLDivElement, MouseEvent>) => void)`	—	Click handler that makes the circle interactive.
`onMouseEnter`	`((e: MouseEvent<HTMLDivElement, MouseEvent>) => void)`	—	Mouse enter handler for hover interactions.
`onMouseLeave`	`((e: MouseEvent<HTMLDivElement, MouseEvent>) => void)`	—	Mouse leave handler for hover interactions.
`padding`	`Spacing`	—	Inner spacing within the box. Accepts a spacing token.
`size`	`string`	—	CSS width of the circle. Also sets `aspect-ratio: 1` for equal height.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Default

Grows with content

Sizes

Empty

Colors

With icon

With text

Interactable

Avatar sizes

Circle / Usage

Circle / Accessibility

Props

Name	Type	Default	Description
`className`	`string`	—	Additional CSS class name(s) to apply to the box element.
`color`	`CircleColor`	`CircleColor.Default`	Background color variant for the circle.
`disabled`	`boolean`	`false`	When true, disables interaction on the circle.
`interactionType`	`InteractableType`	`InteractableType.Default`	Visual style variant when the circle is interactive.
`margin`	`Spacing`	—	Outer spacing around the box. Accepts a spacing token.
`onClick`	`((e: MouseEvent<HTMLDivElement, MouseEvent>) => void)`	—	Click handler that makes the circle interactive.
`onMouseEnter`	`((e: MouseEvent<HTMLDivElement, MouseEvent>) => void)`	—	Mouse enter handler for hover interactions.
`onMouseLeave`	`((e: MouseEvent<HTMLDivElement, MouseEvent>) => void)`	—	Mouse leave handler for hover interactions.
`padding`	`Spacing`	—	Inner spacing within the box. Accepts a spacing token.
`size`	`string`	—	CSS width of the circle. Also sets `aspect-ratio: 1` for equal height.