Tag

Examples

Code

<Tag>
  Tag as text
</Tag>

Tag as anchor

Code

<Tag href="/">
  Tag as anchor
</Tag>

Closable Tag

Code

<Tag
  closeable
  onClose={function noRefCheck() {}}
>
  Closable Tag
</Tag>

If this is necessary please consider accessibility/screen reader usage. The user needs to know specifically what tag they are closing.

Closable Tag

Code

<Tag
  closeText="Remove Closable Tag filter"
  closeable
  onClose={function noRefCheck() {}}
>
  Closable Tag
</Tag>

Code

<Tag onClick={function noRefCheck() {}}>
  Clickable Tag
</Tag>

"a" | "button" | "div"

Theme

Applies permitted design system styles. See for more.

"eager" | "lazy"

Not included in `AllHTMLAttributes` yet so sourced from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

"auto" | "sync" | "async"

Not included in `AllHTMLAttributes` yet so sourced from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Ref<HTMLElement>

Has to not be called ref - done because we also want to use a generic see https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509

boolean

string

Default: "`Close ${children}`"

() => void