Solaris Design System

Tags

States

States Emotive
Type: body-emotive
Height: 48px
padding: 11px 16px		 Productive
Type: body-productive
Height: 40px
Padding: 8px 12px		 Inline
Type: body-inline
Height: 32px
Padding: 8px 4px
:enabled Colour primary tag emotive theme light Colour primary tag emotive theme dark Colour primary tag productive theme light Colour primary tag productive theme dark Colour primary tag inline theme light Colour primary tag inline theme dark
:selected Selected tag emotive theme light Selected tag emotive theme dark Selected tag productive theme light Selected tag productive theme dark Selected tag inline theme light Selected tag inline theme dark
:hover Hover tag emotive theme light Hover tag emotive theme dark Hover tag productive theme light Hover tag productive theme dark Hover tag inline theme light Hover tag inline theme dark
:disabled Disabled tag emotive theme light Disabled tag emotive theme dark Disabled tag productive theme light Disabled tag productive theme dark Disabled tag inline theme light Disabled tag inline theme dark
:skeleton Skeleton tag emotive theme light Skeleton tag emotive theme dark Skeleton tag productive theme light Skeleton tag productive theme dark Skeleton tag inline theme light Skeleton tag inline theme dark
:removeable Removeable tag emotive theme light Skeleton tag emotive theme dark Skeleton tag productive theme light Removeable tag productive theme dark Removeable tag inline theme light Removeable tag inline theme dark

Colours

Colours Emotive Productive Inline
:color-primary Colour primary tag emotive theme light Colour primary tag emotive theme dark Colour primary productive theme light Colour primary tag productive theme dark Colour primary tag inline theme light Colour primary tag inline theme dark
:color-secondary Colour secondary tag emotive theme light Colour secondary tag emotive theme dark Colour secondary productive theme light Colour secondary tag productive theme dark Colour secondary tag inline theme light Colour secondary tag inline theme dark
:color-brand-1 Colour brand-1 tag emotive Colour brand-1 productive Colour brand-1 tag inline
:color-brand-2 Colour brand-2 tag emotive Colour brand-2 productive Colour brand-2 tag inline
:color-accent-1 Colour accent-1 tag emotive Colour accent-1 productive Colour accent-1 tag inline
:color-accent-2 Colour accent-2 tag emotive Colour accent-2 productive Colour accent-2 tag inline
:color-accent-3 Colour accent-3 tag emotive Colour accent-3 productive Colour accent-3 tag inline
:color-accent-4 Colour accent-4 tag emotive Colour accent-4 productive Colour accent-4 tag inline
:color-accent-5 Colour accent-5 tag emotive Colour accent-5 productive Colour accent-5 tag inline

Usage

Tags are used to label, categorise and organise items using keywords.

Multiple or single tags can be used to categorise items. Short labels are used for easy scanning or grouping to understand the status and differentiation.

When to use

Use tags when content is mapped to multiple categories in order to differentiate between them.

Tags can also be used as a method of filtering information, to only show items within that category - Codebots uses this on the blog articles page.

Type Use
Regular For displaying information to allow users to differentiate, not used in filtering method.
Removable Used for filtering method, where users might want to remove their filter choices.