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>

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>