<ods-badge> Badge </ods-badge>
import { OdsBadge } from '@ods/components/react.badge' ;
< OdsBadge > Badge </ OdsBadge >
Set the variant attribute to change the badge’s variant.
Neutral
Info
Success
Warning
Error
<div class = 'flex gap-16' >
<ods-badge variant = 'neutral' > Neutral </ods-badge>
<ods-badge variant = 'primary' > Info </ods-badge>
<ods-badge variant = 'success' > Success </ods-badge>
<ods-badge variant = 'warning' > Warning </ods-badge>
<ods-badge variant = 'danger' > Error </ods-badge>
import { OdsBadge } from '@ods/components/react.badge' ;
<div className = 'flex gap-16' >
< OdsBadge variant = 'neutral' > Neutral </ OdsBadge >
< OdsBadge variant = 'primary' > Info </ OdsBadge >
< OdsBadge variant = 'success' > Success </ OdsBadge >
< OdsBadge variant = 'warning' > Warning </ OdsBadge >
< OdsBadge variant = 'danger' > Error </ OdsBadge >
Use the pill attribute to give badges rounded edges.
Neutral
Info
Success
Warning
Error
1
100
5
10
<div class = 'flex gap-16' >
<ods-badge variant = 'neutral' pill > Neutral </ods-badge>
<ods-badge variant = 'primary' pill > Info </ods-badge>
<ods-badge variant = 'success' pill > Success </ods-badge>
<ods-badge variant = 'warning' pill > Warning </ods-badge>
<ods-badge variant = 'danger' pill > Error </ods-badge>
<ods-badge variant = 'primary' pill > 1 </ods-badge>
<ods-badge variant = 'primary' pill > 100 </ods-badge>
<ods-badge variant = 'primary' pill > 5 </ods-badge>
<ods-badge variant = 'primary' pill > 10 </ods-badge>
import { OdsBadge } from '@ods/components/react.badge' ;
<div className = 'flex gap-16' >
< OdsBadge variant = 'neutral' pill > Neutral </ OdsBadge >
< OdsBadge variant = 'primary' pill > Info </ OdsBadge >
< OdsBadge variant = 'success' pill > Success </ OdsBadge >
< OdsBadge variant = 'warning' pill > Warning </ OdsBadge >
< OdsBadge variant = 'danger' pill > Error </ OdsBadge >
< OdsBadge variant = 'primary' pill > 1 </ OdsBadge >
< OdsBadge variant = 'primary' pill > 100 </ OdsBadge >
< OdsBadge variant = 'primary' pill > 5 </ OdsBadge >
< OdsBadge variant = 'primary' pill > 10 </ OdsBadge >
import '@ods/components/web.badge' ;
import { OdsBadge } from '@ods/components/react.badge' ;
Note: You only need to import a web component once in your code , as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.
import { OdsBadge } from '@ods/components/react.badge' ;
This component is still in development and cannot be imported at this time.
Slots Name Description (default) The badge's content.
Properties Please note, both and are shown in the table below. Unless otherwise specified, the property and attribute names are identical.
Property/Attribute Reflects Type Default variant
'primary' | 'success' | 'neutral' | 'warning' | 'danger' 'primary' pill
boolean false
Parts Name Description base The component's base wrapper.