CircleBadge

CircleBadge visually connects logos of third-party services, eg. in the marketplace.

React

readyNot reviewed for a11y

React examples

<CircleBadge>
  <CircleBadge.Icon icon={RocketIcon} aria-label="Launch badge" />
</CircleBadge>

<CircleBadge>
  <CircleBadge.Icon icon={RocketIcon} aria-label="Launch badge" />
</CircleBadge>

Name	Default	Description
variant	`'medium'`	`'small' \| 'medium' \| 'large'` Creates a smaller or larger badge. Has no effect if the `size` prop is set
size		`number` Sets the size of the badge in pixels. Overrides the `variant` prop when set
inline	`false`	`boolean` Styles the badge to `display: inline`
ref		`React.RefObject<HTMLDivElement>`
as	`"div"`	`React.ElementType`
sx		`SystemStyleObject`

Name	Default	Description
as	`Octicon`	`React.ElementType`

See Octicon for more prop options