CircleBadge

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

React

ready

This component will be removed in PRC's next major release. Instead of using CircleBadge, you may replace the component with specific icon imports from @primer/octicons-react and utilize customized styling.

React examples

Default

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

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

Props

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 Deprecated		`SystemStyleObject`

CircleBadge.Icon

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

See Octicon for more prop options