Fusion UI

Overview

A Tag labels content to organize, classify or group it, optionally with an icon.

Tag

"use client";

import React from "react";
import {Tag} from "@brynlabs/fusion-ui";

export const TagExample = () => <Tag tagStyle={"primary"}>Tag</Tag>;

Icon

Tag 123

Tag 456

"use client";

import React from "react";
import {IconShield, Tag} from "@brynlabs/fusion-ui";

export const TagIconExample = () => (
  <div style={{display: "flex", gap: "1rem"}}>
    <Tag tagStyle={"secondary"} emphasis={"high"} icon={<IconShield />}>
      Tag 123
    </Tag>
    <Tag tagStyle={"critical"} icon={<IconShield />}>
      Tag 456
    </Tag>
  </div>
);

Styles & emphasis

primary low

primary medium

primary high

secondary low

secondary medium

secondary high

success low

success medium

success high

warn low

warn medium

warn high

critical low

critical medium

critical high

purple low

purple medium

purple high

fuchsia low

fuchsia medium

fuchsia high

orange low

orange medium

orange high

lime low

lime medium

lime high

turquoise low

turquoise medium

turquoise high

neutral low

neutral medium

neutral high

"use client";

import React from "react";
import {IconShield, Tag, TAG_STYLE, TAG_EMPHASIS} from "@brynlabs/fusion-ui";

export const TagStylesExample = () => (
  <div style={{display: "grid", gap: "1rem"}}>
    {TAG_STYLE.map(style => (
      <div key={style} style={{display: "flex", gap: "1rem"}}>
        {TAG_EMPHASIS.map(emphasis => (
          <Tag
            key={`${style}-${emphasis}`}
            emphasis={emphasis}
            tagStyle={style}
            icon={<IconShield />}>
            {`${style} ${emphasis}`}
          </Tag>
        ))}
      </div>
    ))}
  </div>
);