Tag

component tagging label

Introduction

A tag allows users to mark entities with custom labels and keywords to be able to better organize and filter them.

My awesome custom tag

View in Groundhog

Custom tags can be created manually, whereas autogenerated tags are created by a system and can not be edited.

Styleguide

Distances

Tag distances

x: 24px
y: 8px

Elements

Tag elements

Tag name

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-700

Tag bubble

height: 24px
width: depends on text length
border-radius: 12px
background-color: $gray-130

Delete button

Use the nested button with the abort icon.

Disabled state

Tag disabled state

Disabled state of nested button

font-color: $gray-300
border: 1px solid $gray-200 //inside

Autogenerated tags

Autogenerated tags

Autogenerated tags cannot be removed.

Category

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-500

Add tags

Add tag button

Add tag button

Distances

x: 8px
y: 4px
z: 12px

Button

height: 24px
width: 86px
border: 1px solid $turquoise-600 //inside
border-radius: 12px

Icon

Plus icon

width: 16px
height: 16px
icon-color: $turquoise-600

Font

font-family: Bernina Sans Regular
font-size: 12px
color: $turquoise-600

On trigger of the add tag button, a context panel replaces the button (the font stays in the same position). The panel holds an input field and an add button.

Adding a tag overlay

Overlay

width: 320px
height: 78px
border: 1px solid $gray-700 //inside
border-radius: 3px
background-color: $gray-700
padding: 8px

Icon

Plus icon

width: 16px
height: 16px
icon-color: #fff
margin-right: 4px

Add tag font

font-family: Bernina Sans Regular
font-size: 12px
color: #fff

Input field

Input field

margin-top: 16px
margin-right: 8px