Tags

A tag is a static, non-actionable component that indicates an element's status, key properties, or attributes of items.

https://www.figma.com/design/JlsXcbEQZyWfAJCGvSDVv4/Torii-by-SUGOI?node-id=576-2467&t=958j9LWGo85JpkAr-1www.figma.com

Link to Tag component in Figma

Specs

Tag

A Tag, at minimum, is made of a container and label, and it can also support a leading icon. They can hold any color of the branding to help represent different information visually to the user, and they come in 3 different sizes.

Different variants of Tags

Anatomy

Tag anatomy

Sizes

Tags sizes

Spacing

Tags paddings and spacing by sizes

---

Tags aren’t Button Chips

Tags could often be confused with Button Chips, but these differences may help clarify the distinction.

Key characteristics of Tags

Key characteristics of Tags

Key characteristics of Button Chips

Key characteristics of Button Chips

Tags use case example

Tags use case example

Changelog