Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.

Examples

<.badge>
  <:icon><Icons.plus_circle /></:icon>
</.badge>

See

• https://polaris.shopify.com/components/feedback-indicators/badge
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Badge/Badge.tsx

Attributes

• accessibility_label (:string)
• tone (:string) - Must be one of "info", "success", "warning", "critical", "attention", "new", "magic", "info-strong", "success-strong", "warning-strong", "critical-strong", "attention-strong", "read-only", or "enabled".
• size (:string) - Must be one of "small", "medium", or "large".
• progress (:string) - Must be one of "incomplete", "partiallyComplete", or "complete".
• Global attributes are accepted.

Slots

• icon
• inner_block