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.
<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.
<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.
<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.
<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.
<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.
<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.
<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>