This website requires JavaScript to deliver the best possible experience.

Label

LabelIconpersonImgpersonImg & icon
<span class="label">Label</span>

<span class="label">
   <svg viewbox="0 0 24 24" class="icon">
      <path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
   </svg>
   <span>icon</span>
</span>

<span class="label"><img src="https://picsum.photos/512/512?image=1005" alt="person"/><span>img</span></span>

<span class="label">
   <img src="https://picsum.photos/512/512?image=1014" alt="person"/><span>img & icon</span>
   <svg viewbox="0 0 24 24" class="icon">
      <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
   </svg>
</span>
span.label Label

span.label
  svg(class="icon" viewbox='0 0 24 24')
    path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
  span icon

span.label
  img(src="https://picsum.photos/512/512?image=1005" alt="person")
  span img

span.label
  img(src="https://picsum.photos/512/512?image=1014" alt="person")
  span img & icon
  svg(class="icon" viewbox='0 0 24 24')
    path( d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z')
is-tinyis-smallis-normalis-largeis-massive
<span class="label is-tiny">is-tiny</span>
<span class="label is-small">is-small</span>
<span class="label is-normal">is-normal</span>
<span class="label is-large">is-large</span>
<span class="label is-massive">is-massive</span>
span.label.is-tiny is-tiny
span.label.is-small is-small
span.label.is-normal is-normal
span.label.is-large is-large
span.label.is-massive is-massive
is-primaryis-secondaryis-infois-successis-warningis-dangeris-blackis-white
<span class="label is-primary">is-primary</span>
<span class="label is-secondary">is-secondary</span>
<span class="label is-info">is-info</span>
<span class="label is-success">is-success</span>
<span class="label is-warning">is-warning</span>
<span class="label is-danger">is-danger</span>
<span class="label is-black">is-black</span><span class="label is-white">is-white</span>
span.label.is-primary is-primary
span.label.is-secondary is-secondary
span.label.is-info is-info
span.label.is-success is-success
span.label.is-warning is-warning
span.label.is-danger is-danger
span.label.is-black is-black
span.label.is-white is-white
is-tinyis-smallis-normalis-largeis-massive
<span class="label is-tiny">
    <svg viewbox="0 0 24 24" class="icon">
      <path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
    </svg>
    <span>is-tiny</span>
  </span>

  <span class="label is-small">
    <svg viewbox="0 0 24 24" class="icon">
      <path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
    </svg>
    <span>is-small</span>
  </span>

  <span class="label is-normal">
    <svg viewbox="0 0 24 24" class="icon">
      <path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
    </svg>
    <span>is-normal</span>
  </span>

  <span class="label is-large">
    <svg viewbox="0 0 24 24" class="icon">
      <path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
    </svg>
    <span>is-large</span>
  </span>

  <span class="label is-massive">
    <svg viewbox="0 0 24 24" class="icon">
      <path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
    </svg>
    <span>is-massive</span>
  </span>
span.label.is-tiny
  svg(class="icon" viewbox='0 0 24 24')
    path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
  span is-tiny

span.label.is-small
  svg(class="icon" viewbox='0 0 24 24')
    path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
  span is-small

span.label.is-normal
  svg(class="icon" viewbox='0 0 24 24')
    path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
  span is-normal

span.label.is-large
  svg(class="icon" viewbox='0 0 24 24')
    path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
  span is-large

span.label.is-massive
  svg(class="icon" viewbox='0 0 24 24')
    path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
  span is-massive
is-roundedis-roundedis-roundedis-roundedis-roundedis-roundedis-roundedis-rounded
<span class="label is-rounded is-primary">is-rounded</span>
<span class="label is-rounded is-secondary">is-rounded</span>
<span class="label is-rounded is-info">is-rounded</span>
<span class="label is-rounded is-success">is-rounded</span>
<span class="label is-rounded is-warning">is-rounded</span>
<span class="label is-rounded is-danger">is-rounded</span>
<span class="label is-rounded is-black">is-rounded</span>
<span class="label is-rounded is-white">is-rounded</span>
span.label.is-rounded.is-primary is-rounded
span.label.is-rounded.is-secondary is-rounded
span.label.is-rounded.is-info is-rounded
span.label.is-rounded.is-success is-rounded
span.label.is-rounded.is-warning is-rounded
span.label.is-rounded.is-danger is-rounded
span.label.is-rounded.is-black is-rounded
span.label.is-rounded.is-white is-rounded
ModifierDescriptionClass
Colorindicates the element state

.is-black

.is-white

.is-primary

.is-secondary

.is-info

.is-success

.is-warning

.is-danger

Sizechanges the element size based on font-size

.is-tiny

.is-small

.is-normal

.is-large

.is-massive

Roundedadd rounded corners to a Label.is-rounded

This website uses cookies to ensure you get the best experience on our website.