Badge

Examples

Default 
<nxt-badge>Default</nxt-badge>
 Default Active Approved Declined Delayed 
<nxt-badge>Default</nxt-badge>
<nxt-badge type="active">Active</nxt-badge>
<nxt-badge type="positive">Approved</nxt-badge>
<nxt-badge type="critical">Declined</nxt-badge>
<nxt-badge type="negative">Delayed</nxt-badge>
 Default Active Approved Declined Delayed 
<nxt-badge vibrant>Default</nxt-badge>
<nxt-badge vibrant type="active">Active</nxt-badge>
<nxt-badge vibrant type="positive">Approved</nxt-badge>
<nxt-badge vibrant type="critical">Declined</nxt-badge>
<nxt-badge vibrant type="negative">Delayed</nxt-badge>
 Label 
<style>
  .custom-badge {
    --badge-color: #ffffff;
    --badge-background-color: #003781;
  }
</style>
<nxt-badge class="custom-badge">Label</nxt-badge>
 Default Active Approved Declined Delayed 
<nxt-badge outline>Default</nxt-badge>
<nxt-badge outline type="active">Active</nxt-badge>
<nxt-badge outline type="positive">Approved</nxt-badge>
<nxt-badge outline type="critical">Declined</nxt-badge>
<nxt-badge outline type="negative">Delayed</nxt-badge>
 Default Active Approved Declined Delayed 
<nxt-badge outline vibrant>Default</nxt-badge>
<nxt-badge outline vibrant type="active">Active</nxt-badge>
<nxt-badge outline vibrant type="positive">Approved</nxt-badge>
<nxt-badge outline vibrant type="critical">Declined</nxt-badge>
<nxt-badge outline vibrant type="negative">Delayed</nxt-badge>
 Label 
<style>
  .custom-outline-badge {
    --badge-background-color: #003781;
  }
</style>
<nxt-badge outline class="custom-outline-badge">Label</nxt-badge>

import '@nxt/ndbx-components/badge';

NxtBadge

This component is used to display badges.

Tag: nxt-badge

Slots

Name Description
label

of badge can be placed into the default slot.

Properties

Property Attribute Type Default Description
outline outline boolean false

Changes badge style to outline.
type type NxtBadgeType ''

Sets the type of the badge element.
vibrant vibrant boolean false

Changes badge style to vibrant.

Type Aliases

NxtBadgeType

'active' | 'positive' | 'critical' | 'negative' | ''