CircleBadge

Table of contents

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