Skip to main content
Version: v6

ion-label

scoped

Label is a wrapper element that can be used in combination with ion-item, ion-input, ion-toggle, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating.

Basic Usage​

Item Labels​

Input Labels​

Theming​

Colors​

Properties​

color​

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Defaultundefined

mode​

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

position​

DescriptionThe position determines where and how the label behaves inside an item.
Attributeposition
Type"fixed" | "floating" | "stacked" | undefined
Defaultundefined

Events​

No events available for this component.

Methods​

No public methods available for this component.

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS Custom Properties​

NameDescription
--colorColor of the label. This property is only available when using ion-label inside of an ion-item.

Slots​

No slots available for this component.