## Feature Examples
### Size
- description: Adjust the component size using the `size` prop. Choose from 3 sizes: - `medium` (default) - can be used in all common cases. - `small` - best for dense layouts. - `tiny` - should be used sparingly, for dense and narrow layouts.
- example:
```jsx
Medium
Small
Tiny
;
```
### Type
- description: Control the appearance of the badge according to its priority with the `type` prop. Choose from 3 styles: - `solid` (default) - `outlined` - `transparent`
- example:
```jsx
Solid
Outlined
Transparent
;
```
### Skin
- description: Control the appearance of badges with the `skin` prop. Choose from 13 skins: - `general` (default) - used for default statuses. - `standard`, `neutralStandard` - used for statuses that are relevant to current user task. - `danger`, `neutralDanger` - used for critical issues that require user action. - `success`, `neutralSuccess` - used for success or positive status. - `neutral`, `neutralLight` - used for completed or pending status, when no action is needed at the moment. - `warning`, `warningLight` - used for unresolved, but not critical issues. - `urgent` - used for unresolved and time sensitive issues that require user action. - `premium` - used for items or functions related to Premium Plans.
- example:
```jsx
General
Standard
Danger
Success
Neutral
Warning
Urgent
Premium
Neutral Standard
Neutral Danger
Neutral Success
Neutral Light
Warning Light
General
Standard
Danger
Success
Neutral
Warning
Urgent
Premium
Neutral Standard
Neutral Danger
Neutral Success
Neutral Light
Warning Light
General
Standard
Danger
Success
Neutral
Warning
Urgent
Premium
;
```
### Letter case
- description: Decide whether a badge is written in all uppercase letters or in sentence case with the `uppercase` prop. By default, badges are written in lowercase.
- example:
```jsx
Upper case
Lower case
;
```
### Affix
- description: Add more context to a badge with affix icons: - `prefixIcon` - used to emphasize status message. - `suffixIcon` - used to emphasize statuses that trigger popovers.
- example:
```jsx
}>
Prefix icon
}>
Suffix icon
;
```
## Common Use Case Examples
### Item status
- description: Use badges to communicate item status. Highlight items that require user attention.
- example:
```jsx
() => {
const records = [
{
number: '#1439',
total: '$105.55',
status: (
Paid
),
},
{
number: '#4152',
total: '$928.41',
status: (
Paid
),
},
{
number: '#9261',
total: '$710.68',
status: (
Paid
),
},
{
number: '#9359',
total: '$219.78',
status: (
Overdue
),
},
{
number: '#5560',
total: '$782.01',
status: (
Partially paid
),
},
{
number: '#6690',
total: '$406.27',
status: (
Paid
),
},
{
number: '#5948',
total: '$475.22',
status: (
Sent
),
},
];
const secondaryAction = [
{
icon: ,
text: 'Duplicate',
onClick: () => {},
},
{
icon: ,
text: 'Delete',
onClick: () => {},
},
];
const columns = [
{
title: 'Number',
render: (row) => row.number,
width: '30%',
},
{
title: 'Total',
render: (row) => row.total,
width: '30%',
},
{
title: 'Status',
render: (row) => row.status,
width: '30%',
},
{
title: '',
render: (row) => (
),
width: '10%',
},
];
return (
);
};
```
### Promote
- description: Use badges to draw more attention to new or recommended features and tools.
- example:
```jsx
Go for It}
size="tiny"
badge={Recommended}
image={
}
/>
;
```