Usage
Use Label to display short status or metadata attached to an object in product-like UI, such as a data-table row, dashboard item, application workflow, or GitHub issue. Keep it visually attached to the object it describes. Label is not interactive and should not be used as an isolated eyebrow or pre-heading marker.
Choose a size and color that fit the surrounding product UI without relying on color alone to communicate meaning.
Content
Use Label with short, scannable text. A single word is ideal. Use two or more words only when a record’s status needs more context, such as “Limited availability” or “Enterprise only”.
Options
Size
Labels come in three sizes: small, medium, and large. Prefer the smallest size that remains legible in the product UI context.
Small
Use the small size for compact data rows and issue-style metadata.
Medium
Use the medium size when record metadata needs more emphasis than the small treatment.
Large
Use the large size only when product-like UI needs a particularly prominent status treatment.
Color
Label offers color options from the Primer Brand color palette. Choose a color that helps distinguish record metadata without relying on color alone to communicate status.
Leading visual
You can add a leading icon to enhance the visual context. It is recommended you use an Octicon. Use an icon that reinforces the meaning of the label. For example, a StarIcon for a “Starred” label.