Tag

Tag is a visual label used to categorize, organize, or indicate the status of items.

                                                
                                                import { Tag } from '@alma-oss/spirit-web-react';

                                                
                                                <Tag>Tag</Tag>

Color Variants

There are several color variants of Tag to choose from: neutral, informative, success, warning, danger, and selected.

Each variant also has a subtle version using the isSubtle prop:

                                                
                                                <Tag>Neutral tag</Tag>
                                                <Tag color="informative">Informative tag</Tag>
                                                <Tag color="success">Success tag</Tag>
                                                <Tag color="warning">Warning tag</Tag>
                                                <Tag color="danger">Danger tag</Tag>
                                                <Tag color="selected">Selected tag</Tag>

Subtle variants:

                                                
                                                <Tag isSubtle>Neutral subtle tag</Tag>
                                                <Tag color="informative" isSubtle>Informative subtle tag</Tag>
                                                <Tag color="success" isSubtle>Success subtle tag</Tag>
                                                <Tag color="warning" isSubtle>Warning subtle tag</Tag>
                                                <Tag color="danger" isSubtle>Danger subtle tag</Tag>

Sizes

Tag comes in five available sizes: xsmall, small, medium, large, and xlarge.

                                                
                                                <Tag size="xsmall">XSmall tag</Tag>
                                                <Tag size="small">Small tag</Tag>
                                                <Tag>Medium tag</Tag>
                                                <Tag size="large">Large tag</Tag>
                                                <Tag size="xlarge">XLarge tag</Tag>

With ControlButton

The ControlButton inside Tag requires the expanded size scale and Tag appearance features to be enabled.

ControlButton Size Matching

                                                
                                                <div className="spirit-feature-enable-v5-control-button-expanded-size-scale spirit-feature-enable-v5-tag-appearance">
                                                  <Tag elementType="div" color="selected">
                                                    <span>Tag label</span>
                                                    <ControlButton size="small" isSymmetrical aria-label="Remove Tag label">
                                                      <Icon name="close" />
                                                    </ControlButton>
                                                  </Tag>
                                                </div>

Disabled

Use the isDisabled prop to visually disable a Tag:

                                                
                                                <Tag size="small" isDisabled>
                                                  Disabled tag
                                                </Tag>

Disabled Tag with ControlButton:

                                                
                                                <div className="spirit-feature-enable-v5-control-button-expanded-size-scale spirit-feature-enable-v5-tag-appearance">
                                                  <Tag elementType="div" isDisabled>
                                                    <span>Disabled tag</span>
                                                    <ControlButton size="small" isSymmetrical isDisabled aria-label="Remove Disabled tag">
                                                      <Icon name="close" />
                                                    </ControlButton>
                                                  </Tag>
                                                </div>

Feature Flag: Appearance

Enable the new Tag layout with explicit height and inside spacing by wrapping Tag in an element with the spirit-feature-enable-v5-tag-appearance CSS class:

                                                
                                                <div className="spirit-feature-enable-v5-tag-appearance">
                                                  <Tag>Tag</Tag>
                                                </div>

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

For detailed information see Tag component.