---
title: Badge
description: Inform users about the status of an object or indicate that an action has been completed.
api_name: app-home
source_url:
  html: https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/badge
  md: https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/badge.md
---

# Badge

Inform users about the status of an object or indicate that an action has been completed.

## Properties

* color

  "base" | "strong"

  Modify the color to be more or less intense.

* icon

  "" | "replace" | "search" | "split" | "link" | "edit" | "product" | "variant" | "collection" | "select" | "info" | "incomplete" | "complete" | "color" | "money" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" | "alert-location" | "alert-octagon" | "alert-octagon-filled" | "alert-triangle"

  The type of icon to be displayed in the badge.

* size

  "base" | "large" | "large-100"

  Adjusts the size.

* tone

  "info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"

  Sets the tone of the Badge, based on the intention of the information being conveyed.

## Slots

* children

  HTMLElement

  The content of the Badge.

### Examples

* #### Code

  ##### Default

  ```html
  <s-badge>Fulfilled</s-badge>
  <s-badge tone="info">Draft</s-badge>
  <s-badge tone="success">Active</s-badge>
  <s-badge tone="caution">Open</s-badge>
  <s-badge tone="warning">On hold</s-badge>
  <s-badge tone="critical">Action required</s-badge>
  ```