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


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

Different colors


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


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


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


Default position 5

Right floating position 5

    Default position
    <span class="k-label k-label--accent">5</span>
<h2 class="k-heading">
    Right floating position
    <span class="k-label k-label--success k-label--float-end">5</span>
Need Help? Let our developers personally assist you. Business or Agency subscribers can ask development related questions in our Support Center.

Join 23000+ others and subscribe to our newsletter!