Skip to content
Svelte Polaris Svelte Polaris

Badge

import { Badge } from 'svelte-polaris';

Badges are used to inform merchants of the status of an object or of an action that’s been taken. They provide quick recognition of important information.

Examples

Section titled “Examples”

Default badge

Section titled “Default badge”

Use to give a non-critical status update on a piece of information or action.

Badge with tone

Section titled “Badge with tone”

Use different tones to convey the urgency or importance of the information.

Badge with size

Section titled “Badge with size”

Use different sizes to match the context and hierarchy of your interface.

Props

Section titled “Props”
PropTypeDefaultDescription
childrenstring-The content to display inside the badge
tone'success' | 'info' | 'warning' | 'critical' | 'attention' | 'new'-Sets the color of the badge for the given tone
progress'incomplete' | 'partiallyComplete' | 'complete'-Sets the progress state of the badge
size'small' | 'medium' | 'large''medium'Sets the size of the badge

Accessibility

Section titled “Accessibility”
  • Badges use appropriate color contrast ratios
  • When using color alone to convey meaning, ensure the text content also provides context
  • Screen readers will announce the badge content along with any tone information

Best practices

Section titled “Best practices”

Do

Section titled “Do”
  • Use badges to highlight important status information
  • Choose appropriate tones that match the meaning (success for positive states, critical for errors)
  • Keep badge text short and descriptive
  • Use consistent badge patterns across your interface
  • Consider the context when choosing badge size

Don’t

Section titled “Don’t”
  • Don’t use badges for actions (use buttons instead)
  • Don’t use too many different badge tones in one interface
  • Don’t rely solely on color to convey meaning
  • Don’t use badges for decorative purposes
  • Don’t make badge text too long

Tone guidelines

Section titled “Tone guidelines”
  • Success: Use for positive states like “Active”, “Completed”, “Paid”
  • Info: Use for neutral informational states like “Draft”, “Pending review”
  • Warning: Use for states that need attention like “Low stock”, “Partially fulfilled”
  • Critical: Use for negative states like “Error”, “Cancelled”, “Out of stock”
  • Attention: Use for states requiring action like “Pending”, “Requires attention”
  • New: Use to highlight new features or recently added items
Section titled “Related components”
  • Text: For regular text content
  • Tag: For removable labels and filters
  • Indicator: For simple status indicators