Led

The built-in led tag — a customizable LED status indicator with on/off state, color, variants, shapes, and animations.

led is a small LED status indicator — a glowing dot you can drive on or off, tint, shape, and animate. Reach for it to show health, connection, or power state in a status panel.

A Community Component — wraps Led by gfazioli, MIT licensed, installed from npm as @gfazioli/mantine-led.

Demonstrations

A bare {% led %} renders a lit LED in the default style.

{% led %}

On and off

value drives the LED’s state. Set value=false for an off LED, and offColor for the color it shows when off.

{% group %}
{% led value=true color='green' label='On' %}
{% led value=false offColor='gray' label='Off' %}
{% endGroup %}

Variants

Set variant to flat, 3d, neon, or dot for different looks.

{% group %}
{% led variant='flat' color='blue' %}
{% led variant='3d' color='blue' %}
{% led variant='neon' color='blue' %}
{% led variant='dot' color='blue' %}
{% endGroup %}

Shapes and sizes

shape (circle, square, rectangle) and size (xs–xl) control the form factor.

{% group %}
{% led shape='circle' size='xl' color='grape' %}
{% led shape='square' size='lg' color='grape' %}
{% led shape='rectangle' size='md' color='grape' %}
{% endGroup %}

Animation

Turn on animate and pick an animationType (pulse, flash, breathe, blink, glow) for an attention-drawing LED.

{% group %}
{% led animate animationType='pulse' color='red' label='Pulse' %}
{% led animate animationType='blink' color='yellow' label='Blink' %}
{% led animate animationType='glow' color='cyan' label='Glow' %}
{% endGroup %}

Label from the body

The block body becomes the LED’s label when you don’t set a plain-text label.

{% led color='green' labelPosition='right' %}Service healthy{% endLed %}

With other components

LEDs read well inside a status card, one row per service.

{% card title="System status" %}
{% stack gap='xs' %}
{% led value=true color='green' label='API' labelPosition='right' %}
{% led value=true color='green' label='Database' labelPosition='right' %}
{% led value=false offColor='red' animate animationType='blink' label='Cache' labelPosition='right' %}
{% endStack %}
{% endCard %}

Attributes

Omit any attribute to take its default. Bare flags (e.g. animate) become =True.

The block body (between {% led %} and {% endLed %}) is used as the label when no plain-text label is set.

CSS Selector

The LED exposes Mantine Styles API selectors you can target with classNames in your own React, or style directly:

Forward a class with attr={…} (see below) to scope a stylesheet rule to one instance.

Injecting Attributes

The attr={…} channel forwards raw HTML attributes straight onto the rendered LED root — use it for id, class, data-*, ARIA attributes, or anything else not exposed as a typed parameter.