@highlight-ui/tag NPM | npm.io

5.2.10 • Published 9 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

9 months ago

@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.

@highlight-ui/icon @highlight-ui/tokens @highlight-ui/typography @highlight-ui/utils-commons

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 @highlight-ui/tag-picker @highlight-ui/sandbox-custom-menu @highlight-ui/sandbox-multiselect-tag @highlight-ui/sandbox-progress-tracker personio-componants @zalastax/nolb-_hig

9 months ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago