Tag

The Tag component is used to indicate the status of an item, such as 'deprecated' or 'experimental', and optionally includes additional notes. It visually distinguishes these states, enhancing documentation or UI elements where status needs to be clearly communicated.

Usage

Tag Component Usage

import React from 'react';
import { Tag } from '~/ui/components/Tag';

export default function App() {
  return (
    <div>
      <Tag status="experimental" note="In progress" />
      <Tag status="deprecated" note="Use alternative" />
    </div>
  );
}

Rendered Example

experimental: Preview feature

deprecated: No longer supported

Props

Name	Type	Default	Description
status	string	`undefined`	The status category of the tag, e.g., 'deprecated' or 'experimental'
note	string	`undefined`	Optional note providing additional information about the status
className	string	`undefined`	Additional CSS classes to be applied for custom styling
type	string	`undefined`	Type of the tag, influencing styling, e.g., 'toc' for table of contents style