Tag
Examples
Removable
Importing
Slots
Properties
Events
CSS Parts
Dependencies

Tag

<ahi-tag> | AhiTag

Tags help label, organize, and categorize objects. Tags can be added or removed from an object by users or to indicate a selection.

Use to signify the attributes of an object.

Account Owner

<ahi-tag>Account Owner</ahi-tag>

Examples

Removable

Use to allow users to remove attributes from an object.

White

Not Hispanic or Latino

Single

<div class="tag-removable">
  <ahi-tag removable>White</ahi-tag>
  <ahi-tag removable>Not Hispanic or Latino</ahi-tag>
  <ahi-tag removable>Single</ahi-tag>
</div>

<style>
  .tag-removable {
    display: flex;
    /* Flex defaults to nowrap, which forces a row of tags off the side of a narrow screen. */
    flex-wrap: wrap;
    gap: var(--ahi-space-2);
  }
</style>

<script>
  const stack = document.querySelector(".tag-removable");

  stack.addEventListener("ahi-remove", (event) => {
    const tag = event.target;
    tag.remove();
  });
</script>

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/tag/tag.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/tag/tag.js';

Slots

Name	Description
(default)	The tag’s content.

Learn more about using slots.

Properties

Name	Description	Type	Default
`removable`	Makes the tag removable and shows a remove button.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

Events

Name	Description	Event Detail
`ahi-remove`	Emitted when the remove button is activated.	-

Learn more about events.

CSS Parts

Name	Description
`base`	Deprecated. Use the `tag` part instead.
`tag`	The component’s outer wrapper.
`content`	The tag’s content.
`remove-button`	The tag’s remove button, an `<ahi-icon-button>`.
`remove-button__base`	The remove button’s exported `base` part.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<ahi-icon>
<ahi-icon-button>