Label

  • Use labels to enhance the UI.
  • Label (font-)sizes are inherited from their parent
Label
<span class="k-label">Label</span>

Different colors

Default

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.