Tag

<afp-tag>

stable

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

A tag component to display a label or keyword, optionally with a close icon.

Tag

<afp-tag>Tag</afp-tag>

<afp-tag>Tag</afp-tag>

<AfpTag>Tag</AfpTag>

<AfpTag>Tag</AfpTag>

Examples #

Variants #

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

Neutral

Brand

Accent

Info

Error

Success

Warning

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

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

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

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

Appearance #

Use the appearance attribute to set the tag'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-tag appearance="default" variant="neutral">Default</afp-tag>
    <afp-tag appearance="filled" variant="neutral">Filled</afp-tag>
    <afp-tag appearance="outlined" variant="neutral">Outlined</afp-tag>
    <afp-tag appearance="outlined-filled" variant="neutral">Outlined filled</afp-tag>
    <afp-tag appearance="plain" variant="neutral">Plain</afp-tag>
  </div>
  <div class="afp-cluster">
    <afp-tag appearance="default" variant="brand">Default</afp-tag>
    <afp-tag appearance="filled" variant="brand">Filled</afp-tag>
    <afp-tag appearance="outlined" variant="brand">Outlined</afp-tag>
    <afp-tag appearance="outlined-filled" variant="brand">Outlined filled</afp-tag>
    <afp-tag appearance="plain" variant="brand">Plain</afp-tag>
  </div>
  <div class="afp-cluster">
    <afp-tag appearance="default" variant="accent">Default</afp-tag>
    <afp-tag appearance="filled" variant="accent">Filled</afp-tag>
    <afp-tag appearance="outlined" variant="accent">Outlined</afp-tag>
    <afp-tag appearance="outlined-filled" variant="accent">Outlined filled</afp-tag>
    <afp-tag appearance="plain" variant="accent">Plain</afp-tag>
  </div>
  <div class="afp-cluster">
    <afp-tag appearance="default" variant="info">Default</afp-tag>
    <afp-tag appearance="filled" variant="info">Filled</afp-tag>
    <afp-tag appearance="outlined" variant="info">Outlined</afp-tag>
    <afp-tag appearance="outlined-filled" variant="info">Outlined filled</afp-tag>
    <afp-tag appearance="plain" variant="info">Plain</afp-tag>
  </div>
  <div class="afp-cluster">
    <afp-tag appearance="default" variant="error">Default</afp-tag>
    <afp-tag appearance="filled" variant="error">Filled</afp-tag>
    <afp-tag appearance="outlined" variant="error">Outlined</afp-tag>
    <afp-tag appearance="outlined-filled" variant="error">Outlined filled</afp-tag>
    <afp-tag appearance="plain" variant="error">Plain</afp-tag>
  </div>
  <div class="afp-cluster">
    <afp-tag appearance="default" variant="success">Default</afp-tag>
    <afp-tag appearance="filled" variant="success">Filled</afp-tag>
    <afp-tag appearance="outlined" variant="success">Outlined</afp-tag>
    <afp-tag appearance="outlined-filled" variant="success">Outlined filled</afp-tag>
    <afp-tag appearance="plain" variant="success">Plain</afp-tag>
  </div>
  <div class="afp-cluster">
    <afp-tag appearance="default" variant="warning">Default</afp-tag>
    <afp-tag appearance="filled" variant="warning">Filled</afp-tag>
    <afp-tag appearance="outlined" variant="warning">Outlined</afp-tag>
    <afp-tag appearance="outlined-filled" variant="warning">Outlined filled</afp-tag>
    <afp-tag appearance="plain" variant="warning">Plain</afp-tag>
  </div>
</div>

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

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

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

Sizes #

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

Small

Medium

Large

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

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

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

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

Shapes #

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

Pill

Rounded

Soft

Square

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

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

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

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

Closeable #

Use the closeable attribute to close the tag.

Closeable

<afp-tag appearance="filled" variant="error" closeable>Closeable</afp-tag>

<afp-tag [appearance]="'filled'" [variant]="'error'" closeable>Closeable</afp-tag>

<AfpTag appearance="filled" variant="error" closeable>Closeable</AfpTag>

<AfpTag :appearance="'filled'" :variant="'error'" closeable>Closeable</AfpTag>

Custom Icons #

You can provide a custom icon for the close button by using the close-icon slot.

Custom Icon

<afp-tag closeable>
  <afp-icon name="check-all" slot="close-icon"></afp-icon>
  Custom Icon
</afp-tag>

<afp-tag closeable>
  <afp-icon [name]="'check-all'" [slot]="'close-icon'"></afp-icon>
  Custom Icon
</afp-tag>

<AfpTag closeable>
  <AfpIcon name="check-all" slot="close-icon"></AfpIcon>
  Custom Icon
</AfpTag>

<AfpTag closeable>
  <AfpIcon :name="'check-all'" :slot="'close-icon'"></AfpIcon>
  Custom Icon
</AfpTag>

Properties

Learn more about properties.

Name Description Reflects

variant

variant of tag

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 tag

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 tag

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 tag

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

closeable

Determines whether the tag element is closeable.

Type boolean

Default false

value

the value of the tag

Type string

Methods

Learn more about using methods.

Name	Description	Arguments
`close`	Closes the component and emits a close event. This method triggers the `afp-hide` event, passing the current value as an argument. The event signals that the component is being closed. Return `void`	-

Events

Learn more about events.

Name	Return	Description
`afp-show`	`void`	Emitted when the tag becomes visible.
`afp-hide`	`void`	Emitted when the tag is hidden.

Slots

Learn more about slots.

Name	Description
`close-icon`	Optional slot to replace the default close icon.
`default`	The default slot for the tag.

Internationalization

Learn more about internationalization.

Key	Description
`tag.close.aria-label`	The aria-label of the close icon in the tag component.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`label`	The tag label part.	`::part(label)`
`close-icon`	The close icon part.	`::part(close-icon)`
`close-icon-wrapper`	The close icon wrapper part.	`::part(close-icon-wrapper)`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-icon

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/tag/tag.js';