Menu
Menu
UI Element: Label
8 of 14
Button Divider Flag Header Icon Image Input Label List Loader Rail Reveal Segment Step
---

Label

A label displays content classification

Definition Type
Design
Code
Summary
Download

UI Framework

Themable
Build Tools
Choose

Standalone

Default Theme
Precompiled
Choose
Semantic UI
Download ZIP Getting Started

Package Managers

Standalone Label
Download ZIP View GitHub

Package Managers

Types
LabelDetailRemovableLinkImagePointingCornerTagRibbonAttachedHorizontalCircularFloating
Variations
ColorsSize
Groups
Group SizeColored GroupTag GroupCircular Group

Types

Label

A label

23

Detail

A label can contain a detail

Dogs
214

Removable

A label can contain a delete icon

Witty

Link

A label can contain a text link

Inbox 23

Image

A label can be formatted to include an image

dog@doggington.com kelly@bellyscratcher.com
Friend
james@thepooch.com

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

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.

Label Inline Text Label
Label Label
Hotel
Food

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

Horizontal

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

Fruit
Kumquats
Candy
Ice Cream
Fruit
Orange
Dog
Poodle

Circular

A label can be circular

12 11 10 64 62 1

Floating

A label can float above another element

Messages
22
 Friends
22

Variations

Colors

A label can have different colors

Black Label Yellow Label Green Label Blue Label Orange Label Purple Label Red Label Teal Label

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

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

Help Make Semantic UI Better

Maintaining an open source UI library is no small task. Support for the continued development of Semantic UI comes directly from the community.

Contribute
Translation Hub Issue Tracker CLA Create Themes
Semantic Network
Legacy Docs Learn Semantic Semantic Themes Semantic Layouts
The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate
Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks
Yes, take me to the mirror

Dimmer Message
Dimmer sub-header