Tag

Tags are clickable buttons, if you want a static label instead, see <Badge>

Basic Tag

Use onClick to add your click handler. <Tag> can be marked as selected with active prop.

If clicks on a tag should navigate to a new URL, you should style a link as a Tag instead of using this component.

<Tag active={false} onClick={() => doSomething()}>Basic tag</Tag>
<Tag active={true} onClick={() => doSomething()}>Active tag</Tag>
<Tag active={false} onClick={() => doSomething()}>Basic tag</Tag>
<Tag active={true} onClick={() => doSomething()}>Active tag</Tag>

Compact Tag

Use variant='compact' for a smaller tag.

<Tag variant='compact'>Compact</Tag>
<Tag variant='compact' active>Active compact</Tag>
<Tag variant='compact'>Compact</Tag>
<Tag variant='compact' active>Active compact</Tag>

Disabled

Disable the control with the disabled prop.

<Tag disabled>Basic</Tag>
<Tag disabled variant='compact'>Compact</Tag>
<Tag disabled>Basic</Tag>
<Tag disabled variant='compact'>Compact</Tag>

Interactive demo

import { useState } from "react";
import Tag from "@intility/bifrost-react/Tag";

export default function () {
  const [clickable, setClickable] = useState(false);
  const [selected, setSelected] = useState(true);

  return (
    <div className="bfl-inline">
      <Tag
        // variant='compact'
        // disabled
        active={clickable}
        onClick={() => setClickable(!clickable)}
      >
        Clickable
      </Tag>
      <Tag
        // variant='compact'
        // disabled
        active={selected}
        onClick={() => setSelected(!selected)}
      >
        Pre-selected
      </Tag>
    </div>
  );
}