MindDrop homepageMindDrop Homepage

ComponentsBeta

Tag

An element to visually represent a drop's tags.

ImportantEquationDiagram

import React from 'react';
import { Tag } from '@minddrop/ui';

export const TagDemo = () => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <div style={{ display: 'flex', columnGap: 8 }}>
      <Tag color="red" label="Important" />
      <Tag color="blue" label="Equation" />
      <Tag color="gray" label="Diagram" />
    </div>
  </div>
);

export default TagDemo;

Features

Ten color options.

Usage

Import the component from the @minddrop/ui package.

import { Tag } from '@minddrop/ui';

export default () => {
  return <Tag label="Formula" color="blue" />;
};

API Reference

TagProps extends React.HTMLAttributes<HTMLSpanElement>.

Prop	Type	Default
`label*`	`string`	No default value
`color`	`ContentColor`	`blue`

Edit this page on GitHub.