## 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%', align: 'start', }, { title: 'Status', render: row => row.status, width: '30%', align: 'start', }, { render: row => ( ), width: '10%', }, ]; return ( 7 invoices
    ); }; ``` ### 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={ } /> ; ```