Skip to content


Use CircleBadge to visually connect logos of third party services like in marketplace. Use CircleBadge.Icon to add an Octicon to the CircleBadge.

Default example

System props

System props are deprecated in all components except Box. Please use the sx prop instead.

CircleBadge and CircleBadge.Icon components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props


asStringdivsets the HTML tag for the component
inlineBooleanfalseStyles the badge to display inline
sizeNumbersets the size of the badge in pixels; overrides any value for variant prop when set
variantString'medium'a value of small, medium, or large creates a smaller or larger badge; no effect if size prop is set


CircleBadge.Icon components receive all the same props at [StyledOcticon]. They are listed below for convenience:

ariaLabelStringSpecifies the aria-label attribute, which is read verbatim by screen readers
iconComponentOcticon component used in the component
sizeNumber16Sets the uniform width and height of the SVG element
verticalAlignStringtext-bottomSets the vertical-align CSS property
Edit this page on GitHub
3 contributorsVanAndersonemplumsBinaryMuse
Last edited by VanAnderson on July 22, 2021