CircleBadge
Use circle badge to visually connect logos of third-party services like in the marketplace.
- Alpha
- Not reviewed for accessibility
import {CircleBadge} from '@primer/react'
Use CircleBadge to visually connect logos of third party services like in marketplace. Use CircleBadge.Icon to add an Octicon to the CircleBadge.
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'small' | 'medium' | 'large' | 'medium' | 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 | boolean | false | Styles the badge to `display: inline` |
| ref | React.RefObject<HTMLDivElement> | A ref to the element rendered by this component. Because this component is polymorphic, the type will vary based on the value of the as prop. | |
| as | React.ElementType | "div" | The underlying element to render — either a HTML element name or a React component. |
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |
| Name | Type | Default | Description |
|---|---|---|---|
| as | React.ElementType | StyledOcticon | The underlying element to render — either a HTML element name or a React component. |
Additional props are passed to the <StyledOcticon> element. See StyledOcticon docs for a list of props accepted by the <StyledOcticon> element. | |||