Skip to content
Primer
Components
What's new
Design
Interface guidelinesOcticonsPrototypingPresentations
Development
Primer CSSPrimer Components
About
About
Getting StartedPrimer ThemeSystem PropsCore ConceptsPhilosophyOverriding Styles
Components
AvatarAvatarStackBorderBoxBoxBranchNameBreadcrumbsButtonsCircleBadgeCircleOcticonCounterLabelDetailsDialogDropdownFilteredSearchFilterListFlashFlexGridHeadingLabelLabelGroupLinkPaginationPointerBoxPopoverPositionProgressBarSelectMenuSideNavStateLabelStyledOcticonSubNavTabNavTextTextInputTimelineTooltipTruncateUnderlineNav
GitHub

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

System props

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

Component props

CircleBadge

NameTypeDefaultDescription
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

CircleBadge.Icon components do not receive any additional props besides COMMON system props.

Edit this page on GitHub
2 contributorsBinaryMuseemplums
Last edited by BinaryMuse on October 8, 2019