Tag

An actionable label that changes which content is displayed; can be either an a or a button depending on which is semantically correct.

Polymorphic Component

By default, content is rendered inside an <a>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Basic Tag

A tagA tag

<Tag
  href="#"
  size="medium(default)|large"
>
  A tag
</Tag>

Button Tag

<Tag
  onClick={handleClick}
>
  A tag
</Tag>

White Tag

A tagA tag

<Tag
  color="white"
>
  A tag
</Tag>

Disabled Tag

A tagA tag

<Tag
  ...
  disabled
>
  A tag
</Tag>

Props

Name	Type	Default Value	Required	Description
disabled	boolean	false	No	Should the tag be disabled?
size	"medium" | "large" | TagSize	TagSize.Medium	No	The size of the tag.