Menu
Label
UI Docs
Getting Started New in 2.9
Introduction
Integrations Build Tools Recipes Glossary
Usage
Theming Layouts
Globals
Reset Site
Elements
Button Container Divider Emoji Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step Text
Collections
Breadcrumb Form Grid Menu Message Table
Views
Ad Card Comment Feed Item Statistic
Modules
Accordion Calendar Checkbox Dimmer Dropdown Embed Flyout Modal Nag Popup Progress Rating Search Shape Sidebar Slider Sticky Tab Toast Transition
Behaviors
API Form Validation State Visibility

Label
A label displays content classification

2 Themes

Types

Label

A label

23

Highlight keyboard shortcuts

CTRL + Alt + Del + L WASD

Image

A label can be formatted to emphasize an image

Joe Elliot Stevie
Veronika
Friend
 Veronika
Student
 Helen
Co-worker
Adrienne
Zoe
Nan

Pointing

A label can point to content next to it

Please enter a value
Please enter a value
That name is taken!
Your password must be 6 characters or more
Please enter a value
Please enter a value
That name is taken!
Your password must be 6 characters or more

Corner

A label can position itself in the corner of an element

A corner label must be positioned inside a container with position: relative to display properly. If a container is rounded you will need to add overflow:hidden to the container to produce a rounded label.

Tag

A label can appear as a tag

New Upcoming Featured

Ribbon

A label can appear as a ribbon attaching itself to an element.

Overview Account Details Community User Reviews
Specs Reviews
Hotel
Food
Hotel
Food

Bottom and Center Ribbon

A ribbon label can appear vertically centered or positioned to the bottom.

Overview Account Details
Overview Account Details

Attached

A label can attach to a content segment

Attached labels attempt to intelligently pad other content to account for their position, but may not in all cases apply this padding correctly.

If this happens you may need to manually correct the padding of the other elements inside the container.

HTML
CSS
Code
View
User View
Admin View
HTML
CSS
Code
View
User View
Admin View

Horizontal

A horizontal label is formatted to label content along-side it horizontally

Fruit
Kumquats
Candy
Ice Cream
Fruit
Orange
Dog
Poodle

Floating

A label can float above or below another element.

A floating label must be positioned inside a container with position: relative to display properly.
Messages
22
 Friends
22


Messages
22 Mails
 Friends
22 Friends


Messages
22
 Friends
22


Messages
22 Mails
 Friends
22 Friends

Floating left

Floating Labels can be positioned to the left also

Messages
22
 Friends
22


Messages
22 Mails
 Friends
22 Friends

Floating aligned

Floating Labels containing large text can be aligned to the left or right

Messages from Fomantic-UI-Users
22 Mails unread
 Friends of the Fomantic-UI Community
22 Friends online

Inverted

All Variants of Label can be inverted

Primary Secondary Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black

Primary Secondary Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black

Tag Primary Secondary Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black

Content

Detail

A label can contain a detail

Dogs
214

Icon

A label can include an icon

Mail
Test Passed
Dog
Cat
Icons can be placed to the right inside a label.
Mail
Test Passed
Dog
Cat
Labels can contain individual icons without text.
For backward-compatibility during v2.x, close/delete icon.
  • Requires left icon to be added to the parent label when the icon is placed on the left of a label.
  • Does not require right icon to be added to parent label when the icon is placed on the right of the label.
This rule may be simplified in a later minor or major version.
Close
Delete
Close
Delete

Image

A label can include an image

Elliot Stevie

Link

A label can be a link or contain an item that links

23
23 View Mail

States

Disabled

A label can show it is currently unable to be interacted with

Disabled Label

Variations

Fluid

A label can take the width of its container

Fits container

Centered

Text can be shown centered

Fits container

Circular

A label can be circular

2 2 2 2 2 2 2 2 2 2 2 2 2

Basic

A label can reduce its complexity

Basic Pointing Elliot Red Pointing Blue

Colored

A label can have different colors

Primary Secondary Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black

Basic Tag Labels

Standard Tag Primary Secondary Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black

Size

A label can be small or large

Mini
Tiny
Small
Medium
Large
Big
Huge
Massive

Groups

Group Size

Labels can share sizes together

Fun
Happy
Smart
Witty

Colored Group

Labels can share colors together

Fun Happy
22
 Smart Insane Exciting

Basic Group

Labels can share their style together

Fun Happy
22
 Smart Insane Exciting

Tag Group

Labels can share tag formatting

$10.00 $19.99 $24.99 $30.99 $10.25

Circular Group

Labels can share shapes

11 22 33 44 141

Dimmer Message
Dimmer sub-header