@wix/design-system
Version:
@wix/design-system
332 lines (309 loc) • 9.99 kB
Markdown
## Feature Examples
### Size
- description: <p>Adjust the component size using the <code>size</code> prop. It supports 2 sizes:</p><p></p><li><code>medium</code> </li><li><code>small</code> </li>
- example:
```jsx
() => (
<Box direction="vertical" gap="12px">
<CounterBadge size="medium">8</CounterBadge>
<CounterBadge size="small">8</CounterBadge>
</Box>
);
```
### Skin
- description: <p>Control the skin of a component with <code>skin</code> prop. Is support 10 skins:</p><p></p><li><code>general</code> - use it as the default emphasis</li><li><code>danger</code> - use it to highlight a destructive or critical value</li><li><code>urgent</code> - use it to draw immediate attention to a value</li><li><code>standard</code> - use it as the primary branded emphasis</li><li><code>warning</code> - use it to highlight a value that can have an unexpected impact</li><li><code>warningLight</code> - use it when warning needs reduced emphasis</li><li><code>success</code> - use it to highlight confirmed or completed values</li><li><code>light</code> - use it on dark backgrounds</li><li><code>neutralStandard</code> - use it when the counter needs neutral emphasis</li><li><code>neutralLight</code> - use it when the counter needs minimal emphasis on light backgrounds</li>
- example:
```jsx
() => (
<Box direction="vertical" gap="18px">
<Box gap="12px" verticalAlign="middle">
<CounterBadge skin="general">1</CounterBadge>
<Text size="small">General</Text>
</Box>
<Box gap="12px" verticalAlign="middle">
<CounterBadge skin="danger">1</CounterBadge>
<Text size="small">Danger</Text>
</Box>
<Box gap="12px" verticalAlign="middle">
<CounterBadge skin="urgent">1</CounterBadge>
<Text size="small">Urgent</Text>
</Box>
<Box gap="12px" verticalAlign="middle">
<CounterBadge skin="standard">1</CounterBadge>
<Text size="small">Standard</Text>
</Box>
<Box gap="24px" verticalAlign="middle">
<Box gap="12px" verticalAlign="middle">
<CounterBadge skin="warning">1</CounterBadge>
<Text size="small">Warning</Text>
</Box>
<Box gap="12px" verticalAlign="middle">
<CounterBadge skin="warningLight">1</CounterBadge>
<Text size="small">Warning light</Text>
</Box>
</Box>
<Box gap="12px" verticalAlign="middle">
<CounterBadge skin="success">1</CounterBadge>
<Text size="small">Success</Text>
</Box>
<Box gap="12px" verticalAlign="middle">
<CounterBadge skin="light">1</CounterBadge>
<Text size="small">Light</Text>
</Box>
<Box gap="24px" verticalAlign="middle">
<Box gap="12px" verticalAlign="middle">
<CounterBadge skin="neutralStandard">1</CounterBadge>
<Text size="small">Neutral standard</Text>
</Box>
<Box gap="12px" verticalAlign="middle">
<CounterBadge skin="neutralLight">1</CounterBadge>
<Text size="small">Neutral light</Text>
</Box>
</Box>
</Box>
);
```
### Shadow
- description: <p>Use the <code>showShadow</code> prop to add a drop shadow to the counter badge.</p>
- example:
```jsx
() => {
return (
<Layout cols={4}>
<Cell span={1}>
<CounterBadge skin="general" showShadow>1</CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge skin="standard" showShadow>1</CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge skin="neutralStandard" showShadow>1</CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge skin="danger" showShadow>1</CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge skin="warning" showShadow>1</CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge skin="warningLight" showShadow>1</CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge skin="urgent" showShadow>1</CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge skin="success" showShadow>1</CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge skin="light" showShadow>1</CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge skin="neutralLight" showShadow>1</CounterBadge>
</Cell>
</Layout>
);
};
```
### Custom node
- description: <p>A counter badge can also display a custom node as its content, like an icon or a short text label, instead of a number.</p>
- example:
```jsx
() => {
return (
<Layout cols={4}>
<Cell span={1}>
<CounterBadge><Icons.Check/></CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge><Icons.More/></CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge skin="danger"><Icons.HeartFilled/></CounterBadge>
</Cell>
<Cell span={1}>
<CounterBadge skin="success">New!</CounterBadge>
</Cell>
</Layout>
);
};
```
## Common Use Case Examples
### Counting items in a cart
- description: <p>Attach a counter badge to an icon button to show the number of items in a cart, updating as items are added or removed.</p>
- example:
```jsx
() => (
<Box>
<Card>
<Box padding="30px 40px 30px" gap="24px">
<span style={{ position: 'relative', display: 'inline-block' }}>
<IconButton>
<Icons.Cart />
</IconButton>
<div
style={{
position: 'absolute',
top: '-10px',
left: '25px',
pointerEvents: 'none',
}}
>
<CounterBadge>0</CounterBadge>
</div>
</span>
<span style={{ position: 'relative', display: 'inline-block' }}>
<IconButton>
<Icons.Cart />
</IconButton>
<div
style={{
position: 'absolute',
top: '-10px',
left: '25px',
pointerEvents: 'none',
}}
>
<CounterBadge>21</CounterBadge>
</div>
</span>
<span style={{ position: 'relative', display: 'inline-block' }}>
<IconButton>
<Icons.Cart />
</IconButton>
<div
style={{
position: 'absolute',
top: '-10px',
left: '25px',
pointerEvents: 'none',
}}
>
<CounterBadge>555</CounterBadge>
</div>
</span>
</Box>
</Card>
</Box>
);
```
### Prioritizing by urgency
- description: <p>Use a counter badge to show the number of items in each category, making it easy to identify where attention is needed most.</p>
- example:
```jsx
() => {
const [activeTab, setActiveTab] = React.useState(0);
const tabs = [
{ id: 0, title: 'All orders' },
{
id: 1,
title: (
<Box gap="6px" verticalAlign="middle">
<Text size="small">Pending</Text>
<CounterBadge skin="warning" size="tiny">5</CounterBadge>
</Box>
),
},
{
id: 2,
title: (
<Box gap="6px" verticalAlign="middle">
<Text size="small">Cancelled</Text>
<CounterBadge skin="danger" size="tiny">3</CounterBadge>
</Box>
),
},
{
id: 3,
title: (
<Box gap="6px" verticalAlign="middle">
<Text size="small">Completed</Text>
<CounterBadge skin="success" size="tiny">24</CounterBadge>
</Box>
),
},
];
return (
<Box width="560px">
<Card>
<Card.Header
title="Orders"
subtitle="Manage and track your store orders"
/>
<Card.Divider />
<Tabs
items={tabs}
activeId={activeTab}
onClick={({ id }) => setActiveTab(id)}
/>
<Box padding="0 0 20px" />
</Card>
</Box>
);
};
```
### New feature or item
- description: <p>By displaying a custom node inside a counter badge, you can highlight non-numeric information — like a "New!" label to draw attention to a recently added feature or item.</p>
- example:
```jsx
() => {
const [hoveredId, setHoveredId] = React.useState(null);
return (
<Box width="460px">
<Card>
<Card.Header
title="Tools"
subtitle="Everything you need to grow your business"
/>
<Card.Divider />
<Card.Content>
<Box
direction="vertical"
gap="2px"
onMouseEnter={() => setHoveredId('1')}
onMouseLeave={() => setHoveredId(null)}
style={{
cursor: 'pointer',
margin: '-24px',
padding: '24px',
backgroundColor:
hoveredId === '1' ? 'var(--wsr-color-D70)' : 'transparent',
transition: 'background-color 0.1s ease',
}}
>
<Text size="small">Email campaigns</Text>
<Text size="tiny" secondary>
Send newsletters to your contacts
</Text>
</Box>
</Card.Content>
<Card.Divider />
<Card.Content>
<Box
direction="vertical"
gap="2px"
onMouseEnter={() => setHoveredId('2')}
onMouseLeave={() => setHoveredId(null)}
style={{
cursor: 'pointer',
margin: '-24px',
padding: '24px',
backgroundColor:
hoveredId === '2' ? 'var(--wsr-color-D70)' : 'transparent',
transition: 'background-color 0.1s ease',
}}
>
<Box gap="8px" verticalAlign="middle">
<Text size="small">AI content writer</Text>
<CounterBadge skin="success">New!</CounterBadge>
</Box>
<Text size="tiny" secondary>
Generate copy for your site instantly
</Text>
</Box>
</Card.Content>
<Card.Divider />
</Card>
</Box>
);
};
```