• 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


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


Default position 5

Right floating position 5

    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!