Skip to content
Blueprint

Tag

Tags are used to categorize or markup content. They are often used in blog posts, articles, and other content to help users find related content.

<Tag>Tag</Tag>

API Reference

This component is based on the <span> element, but can be used with any element. The following are the props that can be passed to the component.

Prop Type Default
as
TagType span
variant
"contained" | "outlined" "contained"
size
"sm" | "md" | "lg" "sm"
clickable
boolean false
href
string —

Accessibility

The <Tag> component includes some accessibility features to help ensure that the component is usable and understandable by all users. The following are the accessibility features that have been implemented:

  • When a tag is set to clickable, it will render as a <button> element and include a type="button" attribute.
  • When a tag is given the href prop, it will render as an <a> element.

Examples

Variants

Use the variant prop to adjust the visual style. Tag components come in the following variants: contained and outlined, and should be added, removed, and tweaked as necessary based on the needs of the project.

Tag Tag 
<Tag variant="contained">Tag</Tag>
<Tag variant="outlined">Tag</Tag>

Sizes

Use the size prop to adjust the tag size. Tags come in the following sizes: sm, md and lg. Sizes should be added, removed, and tweaked as necessary based on the needs of the project.

Tag Tag Tag 
<Tag size="sm">Tag</Tag>
<Tag size="md">Tag</Tag>
<Tag size="lg">Tag</Tag>

Icon

Tags can be used with icons to provide additional context.

Approved

<Tag>
  <Icon name="approve-check" />
  Approved
</Tag>

Use the href prop to convert a tag to a link element.

Tag 
<Tag href="#">Tag</Tag>

Clickable

Use the clickable prop to convert a tag to a clickable element. This is useful when you want to add an onClick event to the tag. By default, a tag with an href will be clickable.

<Tag clickable>Tag</Tag>

On Dark Backgrounds

Tag can be used on dark backgrounds by adding the dark class to the an ancestor DOM node. THis will invert the colors of the pagination component.

Tag Tag 
<div class="dark bg-slate-900">
  <Tag variant="contained">Tag</Tag>
  <Tag variant="outlined">Tag</Tag>
</div>

Astro Component

Depending on the framework, it’s sometimes beneficial to use a component for generating the button. In this case, we have put together the following Astro component to serve as a blueprint for how you could possibly set up a Button component, and what properties to consider.

Tag.astro
---
import type { HTMLTag, Polymorphic } from 'astro/types'


type Props<TagType extends HTMLTag> = Polymorphic<{
  /**
    The HTML tag to render. By default the component will render as a `span` unless `href` is defined, at which point it will render as an `a`.
  */
  as: TagType
  /**
    The variant the tag will take. Corresponds to the design system.
  */
  variant?: 'contained' | 'outlined'
  /**
    The size of the tag. Corresponds to the design system.
  */
  size?: 'sm' | 'md'
  /**
    Whether the tag should be rendered as a clickable element. By default, a tag with an `href` will be clickable.
  */
  clickable?: boolean
  /**
    The URL to link to. Passing in a value will cause the element to render as an anchor.
  */
  href?: string
}>


const {
  as: TagType,
  variant = 'contained',
  size = 'sm',
  clickable = false,
  href = undefined,
  class: className,
  ...attrs
} = Astro.props


const Element = TagType ? TagType : href ? 'a' : clickable ? 'button' : 'span'
---


<Element
  href={href}
  type={clickable ? 'button' : undefined}
  class:list={[
    'inline-flex items-center justify-center gap-4 rounded-sm text-center font-medium focus:outline-none focus-visible:ring-4',
    {
      'bg-sky-600 text-white dark:bg-sky-200 dark:text-sky-800':
        variant === 'contained',
      'no-underline hover:bg-sky-700 focus-visible:bg-sky-700 focus-visible:ring-sky-600/50 active:bg-sky-800 dark:hover:bg-sky-50 dark:focus-visible:bg-sky-50 dark:focus-visible:ring-white/50  dark:active:bg-sky-100':
        variant === 'contained' && (href || clickable),
      'border border-sky-600 bg-transparent text-sky-600 dark:border-white dark:text-white':
        variant === 'outlined',
      'hover:border-sky-700 hover:bg-sky-100 hover:text-sky-700 focus-visible:border-sky-700 focus-visible:bg-sky-100 focus-visible:ring-sky-600/50 active:bg-sky-200/80 active:text-sky-800 dark:hover:border-white dark:hover:bg-white/25 dark:hover:text-white dark:focus-visible:border-white dark:focus-visible:bg-white/25 dark:focus-visible:ring-white/50 dark:active:bg-white/30':
        variant === 'outlined' && (href || clickable),
      'min-h-20 px-6 text-xs [&_svg]:size-12': size === 'sm',
      'min-h-28 px-8 text-sm [&_svg]:size-16': size === 'md',
      'min-h-36 px-10 text-base [&_svg]:size-20': size === 'lg',
    },
    className,
  ]}
  data-component="Tag"
  {...attrs}
>
  <slot />
</Element>