Tag
Tags are labels used to categorise information on a page.
On this page
How to use tags
Tags help customers quickly organise and refine information on a page.
When using tags:
- Customers should always be able to interact with tags
- Include a ‘clear all’ action if a customer has selected multiple tags
- Where possible, include a dismiss icon once customers have selected a tag so you don't have to rely on colour to indicate whether a tag has been selected
Types of tags
Tags come in three types for three different contexts.
Standard
Standard tags include only the tag label.
Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Standard Tag
With a leading icon
Use an icon that corresponds to the tag label. For example, if your tag label was 'Green' you may choose to include a green icon.
Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
---Content guidelines
Use descriptive tag labels. Avoid using action words which could make customers think something will happen if they select a tag.
Use concise tag labels, try to keep them to one or two words.
Was this page helpful?
Get in touch
Our team can answer any questions about using links or give you a helping hand with your next project.