@telegraph/tag

A tag component with optional interactive button

Installation Instructions

npm install @telegraph/tag

Add stylesheet

Pick one:

Via CSS (preferred):

@import "@telegraph/tag"

Via Javascript:

import "@telegraph/tag/default.css"

Then, include className="tgph" on the farthest parent element wrapping the telegraph components

Usage

Basic Usage

Shorthand tag component that adheres to the telegraph design system

import { Tag } from "@telegraph/tag"

...

<Tag>Tag</Tag>

Props

Name	Type	Default	Options
size	string	"1"	"1" "2"
color	string	"default"	"default", "gray", "red", "accent", "blue", "green", "yellow", "purple"
variant	string	"soft"	"soft", "solid"
icon	Icon Props	undefined
onRemove	() => {}	undefined
onCopy	() => {}	undefined

Advanced Usage

Individual parts of the tag component that can be composed in configurations different from the default telegraph design system styles. This can be used to create modifications to one-off tag components without the need to modify the tag exported from this package.

<Tag.Root/>

Wraps the Tag children components and relays props to them.

import { Tag } from '@telegraph/tag'

...

<Tag.Root></Tag.Root>

Props

Name	Type	Default	Options
size	string	"1"	"1" "2"
color	string	"default"	"default", "gray", "red", "accent", "blue", "green", "yellow", "purple"
variant	string	"soft"	"soft", "solid"

<Tag.Text/>

A component built on top of the Text component from @telegraph/typography with translated props to adhere to the telegraph design system

import { Tag } from '@telegraph/tag'

...

<Tag.Text>Text</Tag.Text>

Props

See text props

<Tag.Button/>

A component build on top of the Button component from @telegraph/button

import { Tag } from '@telegraph/tag'

...

<Tag.Button/>

Props

See button props

<Tag.Text/>

A component built on top of the Text component from @telegraph/typography with translated props to adhere to the telegraph design system

import { Tag } from '@telegraph/tag'

...

<Tag.Text>Text</Tag.Text>

Props

See text props

<Tag.Icon/>

A component build on top of the Icon component from @telegraph/icon

import { Tag } from '@telegraph/tag'

...

<Tag.Icon icon={addSharp} alt="create"/>

Props

See icon props

An example of composing an advanced Tag

import { Tag } from "@telegraph/tag"
import { Lucide  } from '@telegraph/icon'

<Tag.Root color="blue" variant="solid" size="2">
    <Tag.Icon icon={Lucide.Add} alt="Create"/>
    <Tag.Text>Text</Tag.Text>
    <Tag.Button icon={{ icon: Lucide.X, alt: "remove"}} onClick={() => {}}/>
</Tag.Root>