### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Elements Hub
- Colors
- Helpers
- Buttons
- Blocks
- Content
- Tags & Badges
- Icons
  - Line Icons Light
  - Line Icons Regular
  - Font Awesome 5
  - Feather Icons
- Cards
  - Basic Cards
  - Advanced Cards
  - Bulma Cards
- Table
- Tooltips
- Forms
  - Inputs
  - Input Addons
  - Textarea
  - Selects
  - Custom
  - File Input
- Toggles
  - Checkboxes
  - Radios
  - Switches

# Tags & Badges

### Tags

Huro offers a tag component than can be customized to fit any needs. Tags can have multiple colors. Available modifier classes are `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`, `is-light`, `is-white`, `is-solid`.

Default Light White Solid Primary Info Success Warning Danger Orange Blue Green Purple

          <span class="tag">Default</span>
          <span class="tag is-light">Light</span>
          <span class="tag is-white">White</span>
          <span class="tag is-solid">Solid</span>
          <span class="tag is-primary">Primary</span>
          <span class="tag is-info">Info</span>
          <span class="tag is-success">Success</span>
          <span class="tag is-warning">Warning</span>
          <span class="tag is-danger">Danger</span>
          <span class="tag is-orange">Orange</span>
          <span class="tag is-blue">Blue</span>
          <span class="tag is-green">Green</span>
          <span class="tag is-purple">Purple</span>

### Rounded Tags

Huro tags can have rounded edges. Use the `is-rounded` modifier class on a `tag` element to apply a rounded style. See the code examples for more details about usage.

Default Light White Solid Primary Info Success Warning Danger Orange Blue Green Purple

          <span class="tag is-rounded">Default</span>
          <span class="tag is-rounded is-light">Light</span>
          <span class="tag is-rounded is-white">White</span>
          <span class="tag is-rounded is-solid">Solid</span>
          <span class="tag is-rounded is-primary">Primary</span>
          <span class="tag is-rounded is-info">Info</span>
          <span class="tag is-rounded is-success">Success</span>
          <span class="tag is-rounded is-warning">Warning</span>
          <span class="tag is-rounded is-danger">Danger</span>
          <span class="tag is-rounded is-orange">Orange</span>
          <span class="tag is-rounded is-blue">Blue</span>
          <span class="tag is-rounded is-green">Green</span>
          <span class="tag is-rounded is-purple">Purple</span>

### Outlined Tags

Huro tags can have an outlined style. Use the `is-outlined` modifier class on a `tag` element to apply an outlined style. See the code examples for more details about usage.

Primary Info Success Warning Danger Orange Blue Green Purple

          <span class="tag is-rounded is-primary is-outlined">Primary</span>
          <span class="tag is-rounded is-info is-outlined">Info</span>
          <span class="tag is-rounded is-success is-outlined">Success</span>
          <span class="tag is-rounded is-warning is-outlined">Warning</span>
          <span class="tag is-rounded is-danger is-outlined">Danger</span>
          <span class="tag is-rounded is-orange is-outlined">Orange</span>
          <span class="tag is-rounded is-blue is-outlined">Blue</span>
          <span class="tag is-rounded is-green is-outlined">Green</span>
          <span class="tag is-rounded is-purple is-outlined">Purple</span>

### Light Colors

Huro tags can have light background colors. Use the `is-light` modifier class on a solid color `tag` element to apply an light style. See the code examples for more details about usage.

Primary Info Success Warning Danger

          <span class="tag is-rounded is-primary is-light">Primary</span>
          <span class="tag is-rounded is-info is-light">Info</span>
          <span class="tag is-rounded is-success is-light">Success</span>
          <span class="tag is-rounded is-warning is-light">Warning</span>
          <span class="tag is-rounded is-danger is-light">Danger</span>

### Elevated Tags

Huro tags can be elevated. Use the `is-elevated` modifier class on a solid color `tag` element to apply an elevated style. See the code examples for more details about usage.

Default Solid Primary Info Success Warning Danger Orange Blue Green Purple

          <span class="tag is-rounded is-elevated">Default</span>
          <span class="tag is-rounded is-solid is-elevated">Solid</span>
          <span class="tag is-rounded is-primary is-elevated">Primary</span>
          <span class="tag is-rounded is-info is-elevated">Info</span>
          <span class="tag is-rounded is-success is-elevated">Success</span>
          <span class="tag is-rounded is-warning is-elevated">Warning</span>
          <span class="tag is-rounded is-danger is-elevated">Danger</span>
          <span class="tag is-rounded is-orange is-elevated">Orange</span>
          <span class="tag is-rounded is-blue is-elevated">Blue</span>
          <span class="tag is-rounded is-green is-elevated">Green</span>
          <span class="tag is-rounded is-purple is-elevated">Purple</span>

### Tag Addons

Huro tags can be merged into a single one to achieve addon styles. You can attach another tag or a delete button if you need to. See the code example for more details about usage.

Package Bulma
John Maynard

          <div class="tags has-addons">
              <span class="tag">Package</span>
              <span class="tag is-primary">Bulma</span>
          </div>
          <div class="tags has-addons">
              <span class="tag is-primary">John Maynard</span>
              <a class="tag is-delete"></a>
          </div>

### Tag List

Huro tag adons can be organized in an inline tag list. You can use it to build a custom tag input for example. See the code examples for more details about usage.

javascript
CSS
React
Nodejs
Deno
Docker
Kubernetes

          <div class="field is-grouped is-grouped-multiline">
              <div class="control">
                  <div class="tags has-addons">
                      <a class="tag is-warning">javascript</a>
                      <a class="tag is-delete"></a>
                  </div>
              </div>

              <div class="control">
                  <div class="tags has-addons">
                      <a class="tag is-danger">CSS</a>
                      <a class="tag is-delete"></a>
                  </div>
              </div>

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

              <div class="control">
                  <div class="tags has-addons">
                      <a class="tag is-success">Nodejs</a>
                      <a class="tag is-delete"></a>
                  </div>
              </div>

              <div class="control">
                  <div class="tags has-addons">
                      <a class="tag is-dark">Deno</a>
                      <a class="tag is-delete"></a>
                  </div>
              </div>

              <div class="control">
                  <div class="tags has-addons">
                      <a class="tag is-info">Docker</a>
                      <a class="tag is-delete"></a>
                  </div>
              </div>

              <div class="control">
                  <div class="tags has-addons">
                      <a class="tag is-primary">Kubernetes</a>
                      <a class="tag is-delete"></a>
                  </div>
              </div>
          </div>