Label Component

Figma

The glu-label component provides a styled label with support for an optional tooltip icon and an optional right-aligned text (for example, a character counter). The label text is provided via the default slot, while additional information can be supplied via the tooltip and right-text slots.

Basic Usage

Example 1: Simple Label

Display a simple label without any additional elements.

HTML

Result

Loading...

Live Editor

<glu-label>
  Nombre
</glu-label>

React

Result

Loading...

Live Editor

<GluLabel>Nombre</GluLabel>

Vue

<glu-label>
  Nombre
</glu-label>

<script setup>
import { GluLabel } from '@gelato-ui/vue';
</script>

Angular

<glu-label>
  Nombre
</glu-label>

import { Component } from '@angular/core';
import { GluLabel } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluLabel],
  template: `<glu-label>Nombre</glu-label>`
})
export class MyComponent {}

---

Label with Tooltip

Enable the tooltip by setting the showTooltip property. Use the tooltip slot to provide additional help text. You can also customize the tooltip icon by specifying the tooltipIcon and its variant via the iconVariation property.

HTML

Result

Loading...

Live Editor

<glu-label showTooltip>
  Nombre
  <span slot="tooltip">Este campo es obligatorio</span>
</glu-label>

React

Result

Loading...

Live Editor

<GluLabel showTooltip>
  Nombre
  <span slot="tooltip">Este campo es obligatorio</span>
</GluLabel>

Vue

<glu-label showTooltip>
  Nombre
  <span slot="tooltip">Este campo es obligatorio</span>
</glu-label>

<script setup>
import { GluLabel } from '@gelato-ui/vue';
</script>

Angular

<glu-label showTooltip>
  Nombre
  <span slot="tooltip">Este campo es obligatorio</span>
</glu-label>

import { Component } from '@angular/core';
import { GluLabel } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluLabel],
  template: `
    <glu-label showTooltip>
      Nombre
      <span slot="tooltip">Este campo es obligatorio</span>
    </glu-label>
  `
})
export class MyComponent {}

---

Label with Right Text

Display right-aligned text such as a character counter by enabling the showRightText property and using the right-text slot.

HTML

Result

Loading...

Live Editor

<glu-label showRightText>
  Nombre
  <span slot="right-text">0 / 100</span>
</glu-label>

React

Result

Loading...

Live Editor

<GluLabel showRightText>
  Nombre
  <span slot="right-text">0 / 100</span>
</GluLabel>

Vue

<glu-label showRightText>
  Nombre
  <span slot="right-text">0 / 100</span>
</glu-label>

<script setup>
import { GluLabel } from '@gelato-ui/vue';
</script>

Angular

<glu-label showRightText>
  Nombre
  <span slot="right-text">0 / 100</span>
</glu-label>

import { Component } from '@angular/core';
import { GluLabel } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluLabel],
  template: `
    <glu-label showRightText>
      Nombre
      <span slot="right-text">0 / 100</span>
    </glu-label>
  `
})
export class MyComponent {}

---

Combined Example

Use both tooltip and right text in a single label. Customize the tooltip icon and its variant as needed.

HTML

Result

Loading...

Live Editor

<glu-label showTooltip showRightText tooltipIcon="information-circle" iconVariation="solid">
  Nombre
  <span slot="tooltip">Proporcione su nombre completo</span>
  <span slot="right-text">0 / 100</span>
</glu-label>

React

Result

Loading...

Live Editor

<GluLabel showTooltip showRightText tooltipIcon="information-circle" iconVariation="solid">
  Nombre
  <span slot="tooltip">Proporcione su nombre completo</span>
  <span slot="right-text">0 / 100</span>
</GluLabel>

Vue

<glu-label showTooltip showRightText tooltipIcon="information-circle" iconVariation="solid">
  Nombre
  <span slot="tooltip">Proporcione su nombre completo</span>
  <span slot="right-text">0 / 100</span>
</glu-label>

<script setup>
import { GluLabel } from '@gelato-ui/vue';
</script>

Angular

<glu-label showTooltip showRightText tooltipIcon="information-circle" iconVariation="solid">
  Nombre
  <span slot="tooltip">Proporcione su nombre completo</span>
  <span slot="right-text">0 / 100</span>
</glu-label>

import { Component } from '@angular/core';
import { GluLabel } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluLabel],
  template: `
    <glu-label showTooltip showRightText tooltipIcon="information-circle" iconVariation="solid">
      Nombre
      <span slot="tooltip">Proporcione su nombre completo</span>
      <span slot="right-text">0 / 100</span>
    </glu-label>
  `
})
export class MyComponent {}

---

Properties

Property	Attribute	Description	Type	Default
iconVariation	icon-variation	If true, displays the icon in its solid variant.	"outline" | "solid"	'outline'
showRightText	show-right-text	If true, displays a right text like character counter ("0 / 100") at the opposite end (right side) of the label.	boolean	false
showTooltip	show-tooltip	If true, displays a tooltip icon (using the glu-icon component) right next to the label text.	boolean	false
tooltipIcon	tooltip-icon	If true, displays the icon in its solid variant.	string	'question-mark-circle'

Slots

Slot	Description
	The label text.
"right-text"	The right text.
"tooltip"	The tooltip text.

Dependencies

Used by

• glu-checkbox
• glu-input
• glu-radio
• glu-toggle

Depends on

• glu-icon

Graph

---

Built with StencilJS