See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.
A member of the Bluemix Design System's team will be in touch within 48 hours.
Thank you!
Your issue, , is now in the bluemix-components repo. Click the issue number
to track the progress or make edits to your issue.
We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:
All tags have the same height. However, the width of tags varies based on the amount of content. All four corners of a tag are rounded with a 15px radius.
Tags | units in px / rem
Tags | units in px / rem
PROPERTY
PX
REM
Height
20
1.25
Radius of rounded rectangle
15
0.938
Width: varies based on amount of content
Padding
Tags cannot have any element or text within 3px / .188 em of its borders. Internally, there must be 10px / .625em of space between the tag text and the sides of the tag.
PROPERTY
PX
REM
Padding between tags horizontally
3
.188
Padding between tags vertically
3
.188
Padding on sides of text
10
.625
States
There are many different types of tags, and each type is determined by color:
Tags | units in px / rem
Tags | units in px / rem
Dark UI only: All tag background colors should be at 20% opacity with text at 100% opacity.
COLOR
HEX
SCSS VARIABLE
IBM
#7cc7ff
$color__blue-20
Beta
#dfe6eb
$color__navy-gray-8
Third-party
#6eedd8
$color__teal-20
Local/Dedicated/Custom
#d7aaff
$color__purple-20
Experimental
#ffa573
$color__orange-20
Community
#bfe051
$color__green-20
Private
#fdd600
$color__yellow-20
COLOR
HEX
SCSS VARIABLE
IBM
#c0e6ff
$color__blue-10
Beta
#dfe6eb
$color__navy-gray-8
Third-party
#a7fae6
$color__teal-10
Local/Dedicated/Custom
#eed2ff
$color__purple-10
Experimental
#ffd791
$color__orange-10
Community
#c9f08f
$color__green-10
Private
#fde876
$color__yellow-10
Typography
Tag text should be set in title case with the first letter of each word capitalized. Tags should only have one word. However, if more than one is necessary then connect the words using a hyphen with no spaces. Text should follow the typography font stack for sans-serif.
FONT-SIZE
PX
REM
Tag text
12
.75
FONT-WEIGHT
KEYWORD
NUMERICAL VALUE
Tag text
Normal
400
Tag text should be the same color as the background of the tag it sits on but at 100% opacity (full color).