x
1
<div class="lui-status_dot lui-status_dot--success"></div>StatusDot
Description
Related components
| Used Components | Components where is Used |
|---|---|
| Label |
Usage rules
- ✅ Do
- ❌ Don't
1
<%= render LooposUi::StatusDot.new(kind: params[:kind]&.to_sym || :success) %>No notes provided.
| Param | Description | Input |
|---|---|---|
|
— |
|
Description
StatusDot is a visual indicator component that renders a small circular dot with semantic colors that correspond to different status types, making it easy for users to quickly identify the state of various elements.
Arguments
| Property | Default | Required | Description |
|---|---|---|---|
kind |
:success |
No | The visual style variant of the status dot |
Kind Options
The kind parameter accepts one of the following values:
:success- Green dot indicating successful completion or positive status:informative- Blue dot indicating informational content or neutral status:warning- Orange dot indicating caution or warning state:error- Red dot indicating error state or failure:apps- Uses the current app's text color (semantic color based on app type)
Usage Examples
<!-- Default success status --><%= render LooposUi::StatusDot.new %><!-- Explicit success status --><%= render LooposUi::StatusDot.new(kind: :success) %><!-- Warning status --><%= render LooposUi::StatusDot.new(kind: :warning) %><!-- Error status --><%= render LooposUi::StatusDot.new(kind: :error) %><!-- Informative status --><%= render LooposUi::StatusDot.new(kind: :informative) %><!-- App-specific color --><%= render LooposUi::StatusDot.new(kind: :apps) %>Slots
This component does not use slots.
JS Events
This component does not emit or listen to JavaScript events.