Label

  • Use labels to enhance the UI.
  • Label (font-)sizes are inherited from their parent

Label

Label
<span class="k-label">Label</span>

Different colors

Default

Base label Accent label Success label Neutral label Warning label Error label

Links

Base label Accent label Success label Neutral label Warning label Error label

Buttons

<h2>Default</h2> <p> <span class="k-label k-label--base">Base label</span> <span class="k-label k-label--accent">Accent label</span> <span class="k-label k-label--success">Success label</span> <span class="k-label k-label--neutral">Neutral label</span> <span class="k-label k-label--warning">Warning label</span> <span class="k-label k-label--error">Error label</span> </p> <h2>Links</h2> <p> <a href="#" class="k-label k-label--base">Base label</a> <a href="#" class="k-label k-label--accent">Accent label</a> <a href="#" class="k-label k-label--success">Success label</a> <a href="#" class="k-label k-label--neutral">Neutral label</a> <a href="#" class="k-label k-label--warning">Warning label</a> <a href="#" class="k-label k-label--error">Error label</a> </p> <h2>Buttons</h2> <p> <button type="button" class="k-label k-label--base">Base label</button> <button type="button" class="k-label k-label--accent">Accent label</button> <button type="button" class="k-label k-label--success">Success label</button> <button type="button" class="k-label k-label--neutral">Neutral label</button> <button type="button" class="k-label k-label--warning">Warning label</button> <button type="button" class="k-label k-label--error">Error label</button> </p>

Position

Default position 5

Right floating position 5

<div>
    Default position
    <span class="k-label k-label--accent">5</span> </div> <h2 class="k-heading">
    Right floating position
    <span class="k-label k-label--success k-label--float-end">5</span> </h2>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.

Join 23000+ others and subscribe to our newsletter!