Label — Malkai design system

Overview

Label is one family of short, read-only facts. Its three variants answer different questions: Lifecycle label says where an object is, State label says what is true now, and Compact label classifies its owner. A label is never the control that changes the fact.

Lifecycle label State label Compact label

Usage

Communicate a read-only factA label keeps a state, lifecycle position, classification, source, or relationship visible beside the item it describes.
Match the variant to the factUse Lifecycle label for process position, State label for a current condition, and Compact label for short metadata.
Keep the label inertA label never changes its value when pressed. Use a button, selector, or state toggle when the user can change the fact in place.

Anatomy

1 2

State label

3

1Optional mark. Lifecycle uses a phase dot; State uses a registry icon when the mark adds meaning; Compact has no required mark.
2Label text. One short fact carries the meaning even when colour is unavailable.
3Shell. Padding and type follow S, M or L. Variant owns shape, tint and border; size never changes meaning.

Variants

Variant	Specimen	Use
Lifecycle label
Lifecycle	Lifecycle label	The dot groups a process phase; the word states it.
State label
Positive	Positive state	An affirmative or completed answer.
Cautious	Cautious state	A limited, pending or waiting answer.
Negative	Negative state	A refused, unavailable or failed answer.
Compact label
Compact	Compact label	One short classification in the application typeface.

Sizes

S, M and L are available to every variant. M is the default; S belongs in dense rows and L belongs beside a record identity or in a roomy header.

Size	Lifecycle label	State label	Compact label
SDense	Lifecycle	State	Compact
MDefault	Lifecycle	State	Compact
LProminent	Lifecycle	State	Compact

Lifecycle variants

Phase	Specimen	What changes
Lead	Lifecycle label	The first phase uses the lead dot; the shell and word treatment stay fixed.
Build	Lifecycle label	The active-work phase changes only the dot token.
Wait	Lifecycle label	The waiting phase changes only the dot token.
Win	Lifecycle label	The confirmed end uses the win dot.
Exit	Lifecycle label	The closed-without-confirming end uses the exit dot.

Lifecycle colour stays in the dotThe lifecycle shell remains uniform so a mixed column reads as one family.
The word remains essentialThe lifecycle vocabulary, not the dot colour alone, identifies the phase.

State variants

State	Specimen	Icon and colour
Positive	Positive state	Success tint and check communicate an affirmative or completed answer.
Cautious	Cautious state	Warning tint and hourglass communicate limited, pending or waiting conditions.
Negative	Negative state	Error tint and blocked mark communicate refusal, failure or unavailability.

Icon follows meaningUse the registered mark that reinforces the stated condition; do not decorate every state with the same icon.
No interaction statesState labels do not hover, focus, press or disable; they are readings, not controls.

Do and don't

Limited availability

Do

Use a mark and wording that keep the state understandable without colour.

Don't

Do not turn a read-only label into the control that changes it.

Compact label

Do

Keep classifications short enough to scan beside their owner.

A complete sentence explaining the classification

Don't

Do not use a label as a container for explanatory body copy.

Copy

State what is trueUse the decided lifecycle word, state answer or classification.
Do not name the componentWrite the fact or classification, not “Label”.
No sentence punctuationA label is a compact fact, not explanatory prose.

Accessibility

Never colour-onlyThe word always carries the fact; state icons and lifecycle dots reinforce it.
Inert and honestNo control role, tab stop or pointer cursor.
Decorative marks stay silentDots and repeated icons use aria-hidden="true".

When to reach for something else

The agent changes itUse State toggle or another explicit control.
Progress toward an amountUse Threshold; that is distance to a line, not a short label.
The user filters by itUse Filter chip; a filter records an active query.

Markup

<span class="mk-badge sz-s"><span class="mk-dot"></span>Lifecycle</span>

<span class="mk-status-label is-warning">
  <svg data-mk-icon="hourglass" aria-hidden="true"></svg>State
</span>

<span class="mk-tag sz-l">Compact label</span>