SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Tag

Overview

Tags are used to label or classify content.

Types

1) Tag colours

Default black dark white primary secondary success info warning danger 
<span class="sgds-tag">Default</span>
<span class="sgds-tag is-black">black</span>
<span class="sgds-tag is-dark">dark</span>
<span class="sgds-tag is-white">white</span>
<span class="sgds-tag is-primary">primary</span>
<span class="sgds-tag is-secondary">secondary</span>
<span class="sgds-tag is-success">success</span>
<span class="sgds-tag is-info">info</span>
<span class="sgds-tag is-warning">warning</span>
<span class="sgds-tag is-danger">danger</span>
Tag colours - light variants

Add the .is-light class for tag with less emphasis.

primary secondary success info warning danger 
<span class="sgds-tag is-primary is-light">primary</span>
<span class="sgds-tag is-secondary is-light">secondary</span>
<span class="sgds-tag is-success is-light">success</span>
<span class="sgds-tag is-info is-light">info</span>
<span class="sgds-tag is-warning is-light">warning</span>
<span class="sgds-tag is-danger is-light">danger</span>

2) Groups of tags

Wrap tags with an element with the .sgds-tags class to easily display a list of tags that are vertically centered and automatically wrap lines.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty 
<div class="sgds-tags">
  <span class="sgds-tag">One</span>
  <span class="sgds-tag">Two</span>
  <span class="sgds-tag">Three</span>
  <span class="sgds-tag">Four</span>
  <span class="sgds-tag">Five</span>
  <span class="sgds-tag">Six</span>
  <span class="sgds-tag">Seven</span>
  <span class="sgds-tag">Eight</span>
  <span class="sgds-tag">Nine</span>
  <span class="sgds-tag">Ten</span>
  <span class="sgds-tag">Eleven</span>
  <span class="sgds-tag">Twelve</span>
  <span class="sgds-tag">Thirteen</span>
  <span class="sgds-tag">Fourteen</span>
  <span class="sgds-tag">Fifteen</span>
  <span class="sgds-tag">Sixteen</span>
  <span class="sgds-tag">Seventeen</span>
  <span class="sgds-tag">Eighteen</span>
  <span class="sgds-tag">Nineteen</span>
  <span class="sgds-tag">Twenty</span>
</div>

3) Tag sizes

default medium 
<span class="sgds-tag">default</span>
<span class="sgds-tag is-medium">medium</span>

Size entire groups of tags

Change tags sizes for entire groups of tags by wrapping tags with an element with .sgds-tags .are-medium classes.

primary secondary success info warning danger 
<div class="sgds-tags are-medium">
    <span class="sgds-tag is-primary is-light">primary</span>
    <span class="sgds-tag is-secondary is-light">secondary</span>
    <span class="sgds-tag is-success is-light">success</span>
    <span class="sgds-tag is-info is-light">info</span>
    <span class="sgds-tag is-warning is-light">warning</span>
    <span class="sgds-tag is-danger is-light">danger</span>
</div>

4) Tags with Addons

Join tags together with the has-addons class.

npm 1.4.0
CSS 
<div class="sgds-tags has-addons">
    <span class="sgds-tag is-black">npm</span>
    <span class="sgds-tag is-primary">1.4.0</span>
</div>
<div class="sgds-tags has-addons">
    <span class="sgds-tag is-secondary">CSS</span>
    <a class="sgds-tag is-delete"></a>
</div>

Group tags with addons

Group multiple tags with addons with a wrapping element with .field .is-grouped .is-grouped-multiline. This gives the inner tags margins and line-wrap behaviour.

npm v1.4.0
build passing
chat telegram 
<div class="field is-grouped is-grouped-multiline">
  <!-- The .control modifier adds margin between each has-addons tags -->
  <div class="control">
    <div class="sgds-tags has-addons">
      <span class="sgds-tag is-dark">npm</span>
      <span class="sgds-tag is-info">v1.4.0</span>
    </div>
  </div>

  <div class="control">
    <div class="sgds-tags has-addons">
      <span class="sgds-tag is-dark">build</span>
      <span class="sgds-tag is-success">passing</span>
    </div>
  </div>
  
  <div class="control">
    <div class="sgds-tags has-addons">
      <span class="sgds-tag is-dark">chat</span>
      <span class="sgds-tag is-primary">telegram</span>
    </div>
  </div>
</div>

 

CSS
JS
React 
<div class="field is-grouped is-grouped-multiline">
  <div class="control">
    <div class="sgds-tags has-addons">
      <span class="sgds-tag is-secondary">CSS</span>
      <a class="sgds-tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="sgds-tags has-addons">
      <span class="sgds-tag is-secondary">JS</span>
      <a class="sgds-tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="sgds-tags has-addons">
      <span class="sgds-tag is-secondary">React</span>
      <a class="sgds-tag is-delete"></a>
    </div>
  </div>
</div>

Styles

Modifier Description
is-light Display tags with a lighter colour
is-*color* Set tag colour. See above, or colour helper classes.
is-small
is-medium		 Set tag size

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component