Badge rectangular
Medium
Large
Larger + largest
A badge is a visual indicator that communicates a status or description of an associated component. They use short text, color, and icons for quick recognition and are placed near the relevant content.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
NE
External
News & Events
Update: Announcing T...
Don’t miss out, register n.
12:51 PM
SP
External
Sarah Perez
How Project Managers..
Event Planning
11:24 PM
TD
Julian reacted
I love how this turned o...
Event Planning
Yesterday
ET
Dylan mentioned you
Kat Larsson the docum...
Contoso Team
Yesterday
Copy me
1
1
1
1
Badge rectangular
Brand
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + icon
1
1
1
1
Text only
1
1
1
1
Icon only
Danger
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + icon
1
1
1
1
Text only
1
1
1
1
Icon only
Warning
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + icon
1
1
1
1
Text only
1
1
1
1
Icon only
Success
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + Icon
1
1
1
1
Text only
1
1
1
1
Icon only
Important
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + Icon
1
1
1
1
Text only
1
1
1
1
Icon only
Informative
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + icon
1
1
1
1
Text only
1
1
1
1
Icon only
Subtle
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + icon
1
1
1
1
Text only
1
1
1
1
Icon only
Badge circular
Medium
Large
Larger + largest
A badge is a visual indicator that communicates a status or description of an associated component. They use short text, color, and icons for quick recognition and are placed near the relevant content
DH
1
34
@
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
NE
News & Events
Update: Announcing T...
Don’t miss out, register n.
12:51 PM
SP
Sarah Perez
How Project Managers..
Event Planning
11:24 PM
TD
Julian reacted
I love how this turned o...
Event Planning
Yesterday
ET
Dylan mentioned you
Kat Larsson the docum...
Contoso Team
Yesterday
Copy me
1
1
1
1
1
Badge rectangular
Brand
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + icon
1
1
1
1
Text only
1
1
1
1
Icon only
Danger
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + icon
1
1
1
1
Text only
1
1
1
1
Icon only
Warning
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + icon
1
1
1
1
Text only
1
1
1
1
Icon only
Success
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + Icon
1
1
1
1
Text only
1
1
1
1
Icon only
Important
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + Icon
1
1
1
1
Text only
1
1
1
1
Icon only
Informative
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + icon
1
1
1
1
Text only
1
1
1
1
Icon only
Subtle
Filled
Tint
Outline
Subtle
Icon + text
1
1
1
1
Text + icon
1
1
1
1
Text only
1
1
1
1
Icon only
Badge circular
Medium
Large
Larger + largest
A badge is a visual indicator that communicates a status or description of an associated component. They use short text, color, and icons for quick recognition and are placed near the relevant content
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Duncan replied
Does anyone know whe...
Community
12:51 PM
Molly reacted
I love how this turned o...
Event Planning
11:24 PM
Julian reacted
I love how this turned o...
Event Planning
Yesterday
Dylan mentioned you
Kat Larsson the docum...
Contoso Team
Yesterday
Copy me
Presence badge
Available
Away
Blocked
Busy
DND
Offline
OOF
Unknown
In office
Out of office
