CircleBadge

Table of contents

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

<CircleBadge>
  <CircleBadge.Icon icon={ZapIcon} />
</CircleBadge>

<CircleBadge>
  <CircleBadge.Icon icon={ZapIcon} />
</CircleBadge>

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

Name	Type	Default	Description
as	String	`div`	sets the HTML tag for the component
inline	Boolean	false	Styles the badge to display inline
size	Number		sets the size of the badge in pixels; overrides any value for `variant` prop when set
variant	String	'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:

Name	Type	Default	Description
ariaLabel	String		Specifies the `aria-label` attribute, which is read verbatim by screen readers
icon	Component		Octicon component used in the component
size	Number	16	Sets the uniform `width` and `height` of the SVG element
verticalAlign	String	`text-bottom`	Sets the `vertical-align` CSS property

2 contributors