Badge

Component

Storybook

Figma Demo

Guidelines

Variations

Badges are offered in five semantic colors variants: success, warning, critical, info, and neutral. They may or may not have iconography depending on the type, and not all types allow for all semantic colors.

Types

Badges have three different types available for different use cases.

Boxy (static/default)

Boxy badges are offered only in the neutral color and communicate size information on CardProduct (container, case, and sleeve size).

Does not include an icon.

Pill (static)

Static pill badges are offered in semantic colors and should be used to communicate status when interactivity is not necessary. They typically do not include an icon.

Note that the neutral variant of the static pill has a unique outline treatment with an icon. Current use cases include:

The absence of a discount on CardProduct (includes icon)

AD distinction on CardProduct (does not include an icon)

Pill (interactive)

Pill badges are offered as interactive elements in each semantic color option. They are meant to communicate status on CardProduct such as discounts and price schedule availability.

Must include an icon to help communicate interactivity.

Basic (static)

Basic badges are static elements in the neutral, success, or critical treatments. They are purely informational and communicate SKU details on CardProduct (SKU, packaging detail, container type, and stock status).

Must include an icon.

Usage

Badge usage is flexible and may be used anywhere to indicate status or emphasis. However, keep in mind that the more badges used within a parent component (such as a card), the more visual noise gets created. Badges carry meaning, so be intentional about usage to ensure the intended message is clear.

Badges should help to indicate a quality (such as a product card with a “sponsored” badge) or a level of importance or attention due (such as “overdue” for a late invoice payment).

Pill style badges should be used in most situations. If interactivity is needed and the badge takes a user somewhere, use the interactive variant. If the badge is only meant to communicate, use the static variant.

Boxy and basic badge styles are currently intended for product information across cards, PDP pages, and cart.

Best Practices

• Use badges sparingly and intentionally so that they are noticed and communicate clear intent.
• Avoid pairing multiple badges together to indicate status.

Accessibility

Content

Ensure the label of the badge clearly conveys its purpose and is understandable by all users.

Component Specs

API

• class: string | Default: ''
  Any extra classes for the badge.

• iconName: typeof SvelteComponent | Default: undefined
  The icon type of the badge.

• interactive: boolean | Default: false
  If the badge is interactive.

• label: string | Default: 'Badge'
  The label of the badge.

• testId: string | Default: ''
  Test id for the badge.

• type: 'default' | 'pill' | 'outline' | 'basic' | Default: 'default'
  The type of the badge.

• variant: 'neutral' | 'success' | 'warning' | 'critical' | 'info' | Default: 'neutral'
  The variant of the badge.

Example

<script>
	import { Badge } from '@getprovi/craft-svelte';
	import { TagOutline } from '@getprovi/craft-svelte-icons';
</script>

<Badge label="Default" />
<Badge type="pill" label="Pill" />
<Badge label="Basic" type="basic" iconName="{TagOutline}" />
<Badge label="Success" variant="success" iconName="{CheckCircleSolid}" interactive />

Types

interface Shared {
	class?: string | null | undefined;
	iconName?: typeof SvelteComponent | undefined;
	interactive?: boolean;
	label: string;
	testId?: string | undefined;
	type?: 'default' | 'pill' | 'basic';
	variant?: 'neutral' | 'success' | 'warning' | 'critical' | 'info';
}
interface Boxy extends Shared {
	variant?: 'neutral';
	type?: 'default';
}
interface Static extends Shared {
	interactive?: never;
}
interface Interactive extends Shared {
	iconName: typeof SvelteComponent;
	interactive: boolean;
	variant: 'success' | 'warning' | 'critical' | 'info';
}
type Props = Boxy | Static | Interactive;