Default

The default tag is useful for both visually highlighting and giving user interaction to an element.

    <Tag>A/C Repair</Tag>

Compact

Compact tags are used in areas with small screen space and dense content.

    <Tag compact>Small Tag</Tag>

Subtle

A tag can be deemphasized to reduce visual noise.

    <Tag subtle>Private</Tag>

Tag Group

Tags are frequently paired together to form a tag group.

    <TagGroup>
        <Tag>Asteroid</Tag>
        <Tag>Balloon</Tag>
        <Tag>Cat</Tag>
        <Tag>Doberman</Tag>
    </TagGroup>

Close Icon

A tag can also be manually removed by a user.

    <TagGroup>
        <Tag onClose={() => {}}>Close Tag</Tag>
        <Tag onClose={() => {}} subtle>Close Tag</Tag>
    </TagGroup>

Icons in Tags

An icon can add additional meaning to a scenario.

    <TagGroup>
        <Tag icon="event">Scheduled</Tag>
        <Tag icon="drafts" compact>Drafts</Tag>
    </TagGroup>

Tags in a Form

Tags in a form utilize Sematic UI for functionality.

const TagsInAFormExample = () => {
    const [selected, setSelected] = React.useState()
    return (
        <Form>
            <Form.Select label="Select" multiple options={[
                {key:1, value: 1, text: 'Alderaan', active: true},
                {key:2, value: 2, text: 'Bespin'},
                {key:3, value: 3, text: 'Coruscant'},
                {key:4, value: 4, text: 'Dagobah'},
                {key:5, value: 5, text: 'Hoth'},
                {key:6, value: 6, text: 'Kashyyyk'},
                {key:7, value: 7, text: 'Naboo',},
                {key:8, value: 8, text: 'Tatooine'},
                {key:9, value: 9, text: 'Yavin'},
            ]}
            onChange={(event, value) => setSelected(value.value)}
            value={selected}
            />
        </Form>
    )
}
render(TagsInAFormExample)

Statuses

A status tag highlights an item's state. There are two variants per status: bold (default) and subtle. Use the default bold variant when the status tag is important on the page, and the subtle variant for less important situations or when several competing statuses exist on the page.

Info

The default status state.

    <TagGroup>
        <Tag color="info">New</Tag>
        <Tag color="info" subtle>In Progress</Tag>
    </TagGroup>

Inactive

Inactive, disabled, minor states.

    <TagGroup>
        <Tag color="inactive">Completed</Tag>
        <Tag color="inactive" subtle>Closed</Tag>
    </TagGroup>

Success

Active success state.

    <TagGroup>
        <Tag color="success">Paid</Tag>
        <Tag color="success" subtle>Approved</Tag>
    </TagGroup>

Warning

Warning, likely requests user action.

    <TagGroup>
        <Tag color="warning" >Pending</Tag>
        <Tag color="warning" subtle>Needs Review</Tag>
    </TagGroup>

Critical

Critical or error, likely needs user action.

    <TagGroup>
        <Tag color="critical">Failed Payment</Tag>
        <Tag color="critical" subtle>Disputed</Tag>
    </TagGroup>

Alternate Background Color

A alternate background color can help with labeling and differentiation between tags. This is especially helpful for user-generated tags. The color prop can accept hexcode, rgb, and token values.

    <TagGroup>
        <Tag color="#ACD223">Custom Tag</Tag>
        <Tag color="#D1672A">Custom Tag</Tag>
        <Tag color="#8E3EA2">Custom Tag</Tag>
        <Tag color="#FFBE00">Custom Tag</Tag>
        <Tag color="#60DFA6">Custom Tag</Tag>
        <Tag color="#2EB9FF">Custom Tag</Tag>
        <Tag color="rgb(16, 134, 130)">Custom Tag</Tag>
        <Tag color="#FAAFE2">Custom Tag</Tag>
    </TagGroup>

Truncation

The max length of a tag's text is 270px, or about 35 characters. Tags longer than this will get cut off with ellipsis. The HTML title attribute contains the text's full content regardless. Tags will attempt to wrap when in a Tag Group.

    <TagGroup>
        <Tag onClose={() => {}}>Moon</Tag>
        <Tag onClose={() => {}}>Maintenance Management Equipment for Someone</Tag>
        <Tag onClose={() => {}}>Another one for the ages</Tag>
        <Tag onClose={() => {}}>Sun</Tag>
    </TagGroup>

Best Practices

  • Status tags should be quick and easy to identify.
  • Tags related to forms should be close to the input that controls adding/removing tags.
  • Tags should not exceed 35 characters in length.
  • Use badges for numerical content.

Importing

import { Tag, TagGroup } from '@servicetitan/design-system';