Badge

<afp-badge>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A small visual indicator used to display status, count, or notification information.

Badge

<afp-badge>Badge</afp-badge>

<afp-badge>Badge</afp-badge>

<AfpBadge>Badge</AfpBadge>

<AfpBadge>Badge</AfpBadge>

Examples #

Variants #

Use the variant attribute to set the badge's semantic variant.

Neutral

Brand

Accent

Info

Error

Success

Warning

<div class="afp-cluster">
  <afp-badge variant="neutral">Neutral</afp-badge>
  <afp-badge variant="brand">Brand</afp-badge>
  <afp-badge variant="accent">Accent</afp-badge>
  <afp-badge variant="info">Info</afp-badge>
  <afp-badge variant="error">Error</afp-badge>
  <afp-badge variant="success">Success</afp-badge>
  <afp-badge variant="warning">Warning</afp-badge>
</div>

<div class="afp-cluster">
  <afp-badge [variant]="'neutral'">Neutral</afp-badge>
  <afp-badge [variant]="'brand'">Brand</afp-badge>
  <afp-badge [variant]="'accent'">Accent</afp-badge>
  <afp-badge [variant]="'info'">Info</afp-badge>
  <afp-badge [variant]="'error'">Error</afp-badge>
  <afp-badge [variant]="'success'">Success</afp-badge>
  <afp-badge [variant]="'warning'">Warning</afp-badge>
</div>

<div class="afp-cluster">
  <AfpBadge variant="neutral">Neutral</AfpBadge>
  <AfpBadge variant="brand">Brand</AfpBadge>
  <AfpBadge variant="accent">Accent</AfpBadge>
  <AfpBadge variant="info">Info</AfpBadge>
  <AfpBadge variant="error">Error</AfpBadge>
  <AfpBadge variant="success">Success</AfpBadge>
  <AfpBadge variant="warning">Warning</AfpBadge>
</div>

<div class="afp-cluster">
  <AfpBadge :variant="'neutral'">Neutral</AfpBadge>
  <AfpBadge :variant="'brand'">Brand</AfpBadge>
  <AfpBadge :variant="'accent'">Accent</AfpBadge>
  <AfpBadge :variant="'info'">Info</AfpBadge>
  <AfpBadge :variant="'error'">Error</AfpBadge>
  <AfpBadge :variant="'success'">Success</AfpBadge>
  <AfpBadge :variant="'warning'">Warning</AfpBadge>
</div>

Appearance #

Use the appearance attribute to set the badge's visual appearance.

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

Default

Filled

Outlined

Outlined filled

Plain

<div class="afp-stack">
  <div class="afp-cluster">
    <afp-badge appearance="default" variant="neutral">Default</afp-badge>
    <afp-badge appearance="filled" variant="neutral">Filled</afp-badge>
    <afp-badge appearance="outlined" variant="neutral">Outlined</afp-badge>
    <afp-badge appearance="outlined-filled" variant="neutral">Outlined filled</afp-badge>
    <afp-badge appearance="plain" variant="neutral">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge appearance="default" variant="brand">Default</afp-badge>
    <afp-badge appearance="filled" variant="brand">Filled</afp-badge>
    <afp-badge appearance="outlined" variant="brand">Outlined</afp-badge>
    <afp-badge appearance="outlined-filled" variant="brand">Outlined filled</afp-badge>
    <afp-badge appearance="plain" variant="brand">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge appearance="default" variant="accent">Default</afp-badge>
    <afp-badge appearance="filled" variant="accent">Filled</afp-badge>
    <afp-badge appearance="outlined" variant="accent">Outlined</afp-badge>
    <afp-badge appearance="outlined-filled" variant="accent">Outlined filled</afp-badge>
    <afp-badge appearance="plain" variant="accent">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge appearance="default" variant="info">Default</afp-badge>
    <afp-badge appearance="filled" variant="info">Filled</afp-badge>
    <afp-badge appearance="outlined" variant="info">Outlined</afp-badge>
    <afp-badge appearance="outlined-filled" variant="info">Outlined filled</afp-badge>
    <afp-badge appearance="plain" variant="info">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge appearance="default" variant="error">Default</afp-badge>
    <afp-badge appearance="filled" variant="error">Filled</afp-badge>
    <afp-badge appearance="outlined" variant="error">Outlined</afp-badge>
    <afp-badge appearance="Outlined filled" variant="error">Outlined filled</afp-badge>
    <afp-badge appearance="plain" variant="error">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge appearance="default" variant="success">Default</afp-badge>
    <afp-badge appearance="filled" variant="success">Filled</afp-badge>
    <afp-badge appearance="outlined" variant="success">Outlined</afp-badge>
    <afp-badge appearance="Outlined filled" variant="success">Outlined filled</afp-badge>
    <afp-badge appearance="plain" variant="success">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge appearance="default" variant="warning">Default</afp-badge>
    <afp-badge appearance="filled" variant="warning">Filled</afp-badge>
    <afp-badge appearance="outlined" variant="warning">Outlined</afp-badge>
    <afp-badge appearance="Outlined filled" variant="warning">Outlined filled</afp-badge>
    <afp-badge appearance="plain" variant="warning">Plain</afp-badge>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <afp-badge [appearance]="'default'" [variant]="'neutral'">Default</afp-badge>
    <afp-badge [appearance]="'filled'" [variant]="'neutral'">Filled</afp-badge>
    <afp-badge [appearance]="'outlined'" [variant]="'neutral'">Outlined</afp-badge>
    <afp-badge [appearance]="'outlined-filled'" [variant]="'neutral'">Outlined filled</afp-badge>
    <afp-badge [appearance]="'plain'" [variant]="'neutral'">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge [appearance]="'default'" [variant]="'brand'">Default</afp-badge>
    <afp-badge [appearance]="'filled'" [variant]="'brand'">Filled</afp-badge>
    <afp-badge [appearance]="'outlined'" [variant]="'brand'">Outlined</afp-badge>
    <afp-badge [appearance]="'outlined-filled'" [variant]="'brand'">Outlined filled</afp-badge>
    <afp-badge [appearance]="'plain'" [variant]="'brand'">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge [appearance]="'default'" [variant]="'accent'">Default</afp-badge>
    <afp-badge [appearance]="'filled'" [variant]="'accent'">Filled</afp-badge>
    <afp-badge [appearance]="'outlined'" [variant]="'accent'">Outlined</afp-badge>
    <afp-badge [appearance]="'outlined-filled'" [variant]="'accent'">Outlined filled</afp-badge>
    <afp-badge [appearance]="'plain'" [variant]="'accent'">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge [appearance]="'default'" [variant]="'info'">Default</afp-badge>
    <afp-badge [appearance]="'filled'" [variant]="'info'">Filled</afp-badge>
    <afp-badge [appearance]="'outlined'" [variant]="'info'">Outlined</afp-badge>
    <afp-badge [appearance]="'outlined-filled'" [variant]="'info'">Outlined filled</afp-badge>
    <afp-badge [appearance]="'plain'" [variant]="'info'">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge [appearance]="'default'" [variant]="'error'">Default</afp-badge>
    <afp-badge [appearance]="'filled'" [variant]="'error'">Filled</afp-badge>
    <afp-badge [appearance]="'outlined'" [variant]="'error'">Outlined</afp-badge>
    <afp-badge [appearance]="'Outlined filled'" [variant]="'error'">Outlined filled</afp-badge>
    <afp-badge [appearance]="'plain'" [variant]="'error'">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge [appearance]="'default'" [variant]="'success'">Default</afp-badge>
    <afp-badge [appearance]="'filled'" [variant]="'success'">Filled</afp-badge>
    <afp-badge [appearance]="'outlined'" [variant]="'success'">Outlined</afp-badge>
    <afp-badge [appearance]="'Outlined filled'" [variant]="'success'">Outlined filled</afp-badge>
    <afp-badge [appearance]="'plain'" [variant]="'success'">Plain</afp-badge>
  </div>
  <div class="afp-cluster">
    <afp-badge [appearance]="'default'" [variant]="'warning'">Default</afp-badge>
    <afp-badge [appearance]="'filled'" [variant]="'warning'">Filled</afp-badge>
    <afp-badge [appearance]="'outlined'" [variant]="'warning'">Outlined</afp-badge>
    <afp-badge [appearance]="'Outlined filled'" [variant]="'warning'">Outlined filled</afp-badge>
    <afp-badge [appearance]="'plain'" [variant]="'warning'">Plain</afp-badge>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <AfpBadge appearance="default" variant="neutral">Default</AfpBadge>
    <AfpBadge appearance="filled" variant="neutral">Filled</AfpBadge>
    <AfpBadge appearance="outlined" variant="neutral">Outlined</AfpBadge>
    <AfpBadge appearance="outlined-filled" variant="neutral">Outlined filled</AfpBadge>
    <AfpBadge appearance="plain" variant="neutral">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge appearance="default" variant="brand">Default</AfpBadge>
    <AfpBadge appearance="filled" variant="brand">Filled</AfpBadge>
    <AfpBadge appearance="outlined" variant="brand">Outlined</AfpBadge>
    <AfpBadge appearance="outlined-filled" variant="brand">Outlined filled</AfpBadge>
    <AfpBadge appearance="plain" variant="brand">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge appearance="default" variant="accent">Default</AfpBadge>
    <AfpBadge appearance="filled" variant="accent">Filled</AfpBadge>
    <AfpBadge appearance="outlined" variant="accent">Outlined</AfpBadge>
    <AfpBadge appearance="outlined-filled" variant="accent">Outlined filled</AfpBadge>
    <AfpBadge appearance="plain" variant="accent">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge appearance="default" variant="info">Default</AfpBadge>
    <AfpBadge appearance="filled" variant="info">Filled</AfpBadge>
    <AfpBadge appearance="outlined" variant="info">Outlined</AfpBadge>
    <AfpBadge appearance="outlined-filled" variant="info">Outlined filled</AfpBadge>
    <AfpBadge appearance="plain" variant="info">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge appearance="default" variant="error">Default</AfpBadge>
    <AfpBadge appearance="filled" variant="error">Filled</AfpBadge>
    <AfpBadge appearance="outlined" variant="error">Outlined</AfpBadge>
    <AfpBadge appearance="Outlined filled" variant="error">Outlined filled</AfpBadge>
    <AfpBadge appearance="plain" variant="error">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge appearance="default" variant="success">Default</AfpBadge>
    <AfpBadge appearance="filled" variant="success">Filled</AfpBadge>
    <AfpBadge appearance="outlined" variant="success">Outlined</AfpBadge>
    <AfpBadge appearance="Outlined filled" variant="success">Outlined filled</AfpBadge>
    <AfpBadge appearance="plain" variant="success">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge appearance="default" variant="warning">Default</AfpBadge>
    <AfpBadge appearance="filled" variant="warning">Filled</AfpBadge>
    <AfpBadge appearance="outlined" variant="warning">Outlined</AfpBadge>
    <AfpBadge appearance="Outlined filled" variant="warning">Outlined filled</AfpBadge>
    <AfpBadge appearance="plain" variant="warning">Plain</AfpBadge>
  </div>
</div>

<div class="afp-stack">
  <div class="afp-cluster">
    <AfpBadge :appearance="'default'" :variant="'neutral'">Default</AfpBadge>
    <AfpBadge :appearance="'filled'" :variant="'neutral'">Filled</AfpBadge>
    <AfpBadge :appearance="'outlined'" :variant="'neutral'">Outlined</AfpBadge>
    <AfpBadge :appearance="'outlined-filled'" :variant="'neutral'">Outlined filled</AfpBadge>
    <AfpBadge :appearance="'plain'" :variant="'neutral'">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge :appearance="'default'" :variant="'brand'">Default</AfpBadge>
    <AfpBadge :appearance="'filled'" :variant="'brand'">Filled</AfpBadge>
    <AfpBadge :appearance="'outlined'" :variant="'brand'">Outlined</AfpBadge>
    <AfpBadge :appearance="'outlined-filled'" :variant="'brand'">Outlined filled</AfpBadge>
    <AfpBadge :appearance="'plain'" :variant="'brand'">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge :appearance="'default'" :variant="'accent'">Default</AfpBadge>
    <AfpBadge :appearance="'filled'" :variant="'accent'">Filled</AfpBadge>
    <AfpBadge :appearance="'outlined'" :variant="'accent'">Outlined</AfpBadge>
    <AfpBadge :appearance="'outlined-filled'" :variant="'accent'">Outlined filled</AfpBadge>
    <AfpBadge :appearance="'plain'" :variant="'accent'">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge :appearance="'default'" :variant="'info'">Default</AfpBadge>
    <AfpBadge :appearance="'filled'" :variant="'info'">Filled</AfpBadge>
    <AfpBadge :appearance="'outlined'" :variant="'info'">Outlined</AfpBadge>
    <AfpBadge :appearance="'outlined-filled'" :variant="'info'">Outlined filled</AfpBadge>
    <AfpBadge :appearance="'plain'" :variant="'info'">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge :appearance="'default'" :variant="'error'">Default</AfpBadge>
    <AfpBadge :appearance="'filled'" :variant="'error'">Filled</AfpBadge>
    <AfpBadge :appearance="'outlined'" :variant="'error'">Outlined</AfpBadge>
    <AfpBadge :appearance="'Outlined filled'" :variant="'error'">Outlined filled</AfpBadge>
    <AfpBadge :appearance="'plain'" :variant="'error'">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge :appearance="'default'" :variant="'success'">Default</AfpBadge>
    <AfpBadge :appearance="'filled'" :variant="'success'">Filled</AfpBadge>
    <AfpBadge :appearance="'outlined'" :variant="'success'">Outlined</AfpBadge>
    <AfpBadge :appearance="'Outlined filled'" :variant="'success'">Outlined filled</AfpBadge>
    <AfpBadge :appearance="'plain'" :variant="'success'">Plain</AfpBadge>
  </div>
  <div class="afp-cluster">
    <AfpBadge :appearance="'default'" :variant="'warning'">Default</AfpBadge>
    <AfpBadge :appearance="'filled'" :variant="'warning'">Filled</AfpBadge>
    <AfpBadge :appearance="'outlined'" :variant="'warning'">Outlined</AfpBadge>
    <AfpBadge :appearance="'Outlined filled'" :variant="'warning'">Outlined filled</AfpBadge>
    <AfpBadge :appearance="'plain'" :variant="'warning'">Plain</AfpBadge>
  </div>
</div>

Shapes #

Use the shape attribute to change a badge's shape.

Pill

Rounded

Soft

Square

<div class="afp-cluster afp-align-center">
  <afp-badge shape="pill">Pill</afp-badge>
  <afp-badge shape="rounded">Rounded</afp-badge>
  <afp-badge shape="soft">Soft</afp-badge>
  <afp-badge shape="square">Square</afp-badge>
</div>

<div class="afp-cluster afp-align-center">
  <afp-badge [shape]="'pill'">Pill</afp-badge>
  <afp-badge [shape]="'rounded'">Rounded</afp-badge>
  <afp-badge [shape]="'soft'">Soft</afp-badge>
  <afp-badge [shape]="'square'">Square</afp-badge>
</div>

<div class="afp-cluster afp-align-center">
  <AfpBadge shape="pill">Pill</AfpBadge>
  <AfpBadge shape="rounded">Rounded</AfpBadge>
  <AfpBadge shape="soft">Soft</AfpBadge>
  <AfpBadge shape="square">Square</AfpBadge>
</div>

<div class="afp-cluster afp-align-center">
  <AfpBadge :shape="'pill'">Pill</AfpBadge>
  <AfpBadge :shape="'rounded'">Rounded</AfpBadge>
  <AfpBadge :shape="'soft'">Soft</AfpBadge>
  <AfpBadge :shape="'square'">Square</AfpBadge>
</div>

Sizes #

Use the size attribute to change a badge's size.

Small

Medium

Large

<div class="afp-cluster afp-align-center">
  <afp-badge size="small">Small</afp-badge>
  <afp-badge size="medium">Medium</afp-badge>
  <afp-badge size="large">Large</afp-badge>
</div>

<div class="afp-cluster afp-align-center">
  <afp-badge [size]="'small'">Small</afp-badge>
  <afp-badge [size]="'medium'">Medium</afp-badge>
  <afp-badge [size]="'large'">Large</afp-badge>
</div>

<div class="afp-cluster afp-align-center">
  <AfpBadge size="small">Small</AfpBadge>
  <AfpBadge size="medium">Medium</AfpBadge>
  <AfpBadge size="large">Large</AfpBadge>
</div>

<div class="afp-cluster afp-align-center">
  <AfpBadge :size="'small'">Small</AfpBadge>
  <AfpBadge :size="'medium'">Medium</AfpBadge>
  <AfpBadge :size="'large'">Large</AfpBadge>
</div>

Pulse #

Use the pulse attribute to add a pulsing animation to the badge.

Neutral

Brand

Accent

Info

Error

Success

Warning

<div class="afp-cluster">
  <afp-badge variant="neutral" pulse>Neutral</afp-badge>
  <afp-badge variant="brand" pulse>Brand</afp-badge>
  <afp-badge variant="accent" pulse>Accent</afp-badge>
  <afp-badge variant="info" pulse>Info</afp-badge>
  <afp-badge variant="error" pulse>Error</afp-badge>
  <afp-badge variant="success" pulse>Success</afp-badge>
  <afp-badge variant="warning" pulse>Warning</afp-badge>
</div>

<div class="afp-cluster">
  <afp-badge [variant]="'neutral'" pulse>Neutral</afp-badge>
  <afp-badge [variant]="'brand'" pulse>Brand</afp-badge>
  <afp-badge [variant]="'accent'" pulse>Accent</afp-badge>
  <afp-badge [variant]="'info'" pulse>Info</afp-badge>
  <afp-badge [variant]="'error'" pulse>Error</afp-badge>
  <afp-badge [variant]="'success'" pulse>Success</afp-badge>
  <afp-badge [variant]="'warning'" pulse>Warning</afp-badge>
</div>

<div class="afp-cluster">
  <AfpBadge variant="neutral" pulse>Neutral</AfpBadge>
  <AfpBadge variant="brand" pulse>Brand</AfpBadge>
  <AfpBadge variant="accent" pulse>Accent</AfpBadge>
  <AfpBadge variant="info" pulse>Info</AfpBadge>
  <AfpBadge variant="error" pulse>Error</AfpBadge>
  <AfpBadge variant="success" pulse>Success</AfpBadge>
  <AfpBadge variant="warning" pulse>Warning</AfpBadge>
</div>

<div class="afp-cluster">
  <AfpBadge :variant="'neutral'" pulse>Neutral</AfpBadge>
  <AfpBadge :variant="'brand'" pulse>Brand</AfpBadge>
  <AfpBadge :variant="'accent'" pulse>Accent</AfpBadge>
  <AfpBadge :variant="'info'" pulse>Info</AfpBadge>
  <AfpBadge :variant="'error'" pulse>Error</AfpBadge>
  <AfpBadge :variant="'success'" pulse>Success</AfpBadge>
  <AfpBadge :variant="'warning'" pulse>Warning</AfpBadge>
</div>

Bounce #

Use the bounce attribute to add a bouncing animation to the badge.

Neutral

Brand

Accent

Info

Error

Success

Warning

<div class="afp-cluster">
  <afp-badge variant="neutral" bounce>Neutral</afp-badge>
  <afp-badge variant="brand" bounce>Brand</afp-badge>
  <afp-badge variant="accent" bounce>Accent</afp-badge>
  <afp-badge variant="info" bounce>Info</afp-badge>
  <afp-badge variant="error" bounce>Error</afp-badge>
  <afp-badge variant="success" bounce>Success</afp-badge>
  <afp-badge variant="warning" bounce>Warning</afp-badge>
</div>

<div class="afp-cluster">
  <afp-badge [variant]="'neutral'" bounce>Neutral</afp-badge>
  <afp-badge [variant]="'brand'" bounce>Brand</afp-badge>
  <afp-badge [variant]="'accent'" bounce>Accent</afp-badge>
  <afp-badge [variant]="'info'" bounce>Info</afp-badge>
  <afp-badge [variant]="'error'" bounce>Error</afp-badge>
  <afp-badge [variant]="'success'" bounce>Success</afp-badge>
  <afp-badge [variant]="'warning'" bounce>Warning</afp-badge>
</div>

<div class="afp-cluster">
  <AfpBadge variant="neutral" bounce>Neutral</AfpBadge>
  <AfpBadge variant="brand" bounce>Brand</AfpBadge>
  <AfpBadge variant="accent" bounce>Accent</AfpBadge>
  <AfpBadge variant="info" bounce>Info</AfpBadge>
  <AfpBadge variant="error" bounce>Error</AfpBadge>
  <AfpBadge variant="success" bounce>Success</AfpBadge>
  <AfpBadge variant="warning" bounce>Warning</AfpBadge>
</div>

<div class="afp-cluster">
  <AfpBadge :variant="'neutral'" bounce>Neutral</AfpBadge>
  <AfpBadge :variant="'brand'" bounce>Brand</AfpBadge>
  <AfpBadge :variant="'accent'" bounce>Accent</AfpBadge>
  <AfpBadge :variant="'info'" bounce>Info</AfpBadge>
  <AfpBadge :variant="'error'" bounce>Error</AfpBadge>
  <AfpBadge :variant="'success'" bounce>Success</AfpBadge>
  <AfpBadge :variant="'warning'" bounce>Warning</AfpBadge>
</div>

With Buttons #

A common way to use badges is by placing them on buttons. To simplify this, badges are automatically aligned to the top-right corner when they are nested inside a button.

Requests 23

Warnings 5

Errors 8

<div class="afp-cluster afp-align-center">
  <afp-button>
    Requests
    <afp-badge variant="brand" shape="pill">23</afp-badge>
  </afp-button>
  <afp-button>
    Warnings
    <afp-badge variant="warning" shape="pill">5</afp-badge>
  </afp-button>
  <afp-button>
    Errors
    <afp-badge variant="error" shape="pill">8</afp-badge>
  </afp-button>
</div>

<div class="afp-cluster afp-align-center">
  <afp-button>
    Requests
    <afp-badge [variant]="'brand'" [shape]="'pill'">23</afp-badge>
  </afp-button>
  <afp-button>
    Warnings
    <afp-badge [variant]="'warning'" [shape]="'pill'">5</afp-badge>
  </afp-button>
  <afp-button>
    Errors
    <afp-badge [variant]="'error'" [shape]="'pill'">8</afp-badge>
  </afp-button>
</div>

<div class="afp-cluster afp-align-center">
  <AfpButton>
    Requests
    <AfpBadge variant="brand" shape="pill">23</AfpBadge>
  </AfpButton>
  <AfpButton>
    Warnings
    <AfpBadge variant="warning" shape="pill">5</AfpBadge>
  </AfpButton>
  <AfpButton>
    Errors
    <AfpBadge variant="error" shape="pill">8</AfpBadge>
  </AfpButton>
</div>

<div class="afp-cluster afp-align-center">
  <AfpButton>
    Requests
    <AfpBadge :variant="'brand'" :shape="'pill'">23</AfpBadge>
  </AfpButton>
  <AfpButton>
    Warnings
    <AfpBadge :variant="'warning'" :shape="'pill'">5</AfpBadge>
  </AfpButton>
  <AfpButton>
    Errors
    <AfpBadge :variant="'error'" :shape="'pill'">8</AfpBadge>
  </AfpButton>
</div>

Properties

Learn more about properties.

Name Description Reflects

variant

variant of badge

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

Default AfpVariant.NEUTRAL

size

size of badge

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

shape

shape of the badge

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.SOFT

appearance

appearance of badge

Type

AfpAppearance

Name	Description
`DEFAULT`	Highlighted, primary action (default).
`OUTLINED`	Transparent background with a visible border.
`PLAIN`	Minimal, no border or background.
`FILLED`	Solid background, no border.
`OUTLINED_FILLED`	Solid background with a visible border.

AfpAppearance

Default AfpAppearance.DEFAULT

pulse

enables pulse animation

Type boolean

Default false

bounce

enables bounce animation

Type boolean

Default false

label

aria label for the badge. This is used for accessibility purposes to provide a text alternative for screen readers.

Type string

Slots

Learn more about slots.

Name	Description
`default`	The default slot for the badge content (e.g., text or icon).

Internationalization

Learn more about internationalization.

Key	Description
`badge.aria-label`	The default aria-label for the badge component.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`

CSS Custom Properties

Name	Description	Default
`--afp-badge-pulse-color`	The color used for the pulse animation.	`--variant-color-fill`
`--afp-badge-pulse-speed`	The speed of the pulse animation.	`1.5s`
`--afp-badge-bounce-speed`	The speed of the bounce animation.	`1s`

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/badge/badge.js';