@highlight-ui/tag

Using npm:

npm install @highlight-ui/tag

Using yarn:

yarn add @highlight-ui/tag

Using pnpm:

pnpm install @highlight-ui/tag

In your (S)CSS file:

@import url('@highlight-ui/tag');

Once the package is installed, you can import the library:

import { Tag } from '@highlight-ui/tag';

Usage

import React from 'react';
import { Tag } from '@highlight-ui/tag';

export default function TagExample() {
  return <Tag text="Tag example" />;
}

Props 📜

| Prop | Type | Required | Default | Description | | :---------------- | :-------------------------- | :------- | :-------- | :---------------------------------------------------- | | text | string | Yes | | The text on the tag | | backgroundColor | string | No | #DBE5EC | The Tag's background color as hex | | color | string | No | | The Tag's text color as hex | | interaction | 'none', 'click', 'remove' | No | none | Determines whether the tag is interactive. | | maxWidth | number | No | 200 | The max width of the Tag | | onClick | React.MouseEventHandler | No | | The callback to execute when interacting with the tag | | onRemove | React.MouseEventHandler | No | | The callback to execute when removing the tag | | className | string | No | | Allows providing a custom class name |

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.