Indicator
Indicators can add a visual clue to your components without requiring more size in your layout. There are 2 approaches to them:
Nest your components inside a
<x-indicator>element.Use the
indicatorclass on your components +indicator-itemclass for the children you want to show as indicators.
<x-indicator>
<x-input class="min-w-60" label="Text input"/>
</x-indicator>
<x-input class="indicator min-w-60" title="Login" helper="Type the email you used to register">
<x-badge color="error" size="xs" class="indicator-item indicator-bottom">Required</x-badge>
</x-input>
<x-indicator position="bottom-end">
<x-slot:indicator>
<x-badge label="99+" size="sm" color="warning"/>
</x-slot:indicator>
<x-button>Inbox</x-button>
</x-indicator>
<x-indicator> considers complex components (e.g. <x-input> with a title and/or a helper text) as a whole and as such, may place outside what you may consider the right area, such as next to the title or helper text. Indicators that use classes always places the indicator on the input corner.
<x-indicator color="error">
<x-input class="min-w-60" title="Component title" helper="Input inside indicator"/>
</x-indicator>
#Indicator position
By default, indicators appear on the top-right corner (top-left for right-to-left text) of their components.
To make an indicator appear on another corner, use:
The position attribute of the
<x-indicator>elementThe
indicator:{position}classes for the component children you mark asindicator-item.
<!-- Using x-indicator -->
<div class="grid grid-rows-subgrid grid-cols-[auto_auto_auto] row-span-3 gap-4 items-center">
<x-indicator position="top-start">
<x-slot:indicator>
<x-badge label="⇖" size="sm" color="info"/>
</x-slot:indicator>
<x-button>Button</x-button>
</x-indicator>
<x-indicator position="top">
<x-slot:indicator>
<x-badge label="⇑" size="sm" color="info"/>
</x-slot:indicator>
<x-button>Button</x-button>
</x-indicator>
<x-indicator position="top-end">
<x-slot:indicator>
<x-badge label="⇗" size="sm" color="info"/>
</x-slot:indicator>
<x-button>Button</x-button>
</x-indicator>
<x-indicator position="start">
<x-slot:indicator>
<x-badge label="⇐" size="sm" color="info"/>
</x-slot:indicator>
<x-button>Button</x-button>
</x-indicator>
<span></span>
<x-indicator position="end">
<x-slot:indicator>
<x-badge label="⇒" size="sm" color="info"/>
</x-slot:indicator>
<x-button>Button</x-button>
</x-indicator>
<x-indicator position="bottom-start">
<x-slot:indicator>
<x-badge label="⇙" size="sm" color="info"/>
</x-slot:indicator>
<x-button>Button</x-button>
</x-indicator>
<x-indicator position="bottom">
<x-slot:indicator>
<x-badge label="⇓" size="sm" color="info"/>
</x-slot:indicator>
<x-button>Button</x-button>
</x-indicator>
<x-indicator position="bottom-end">
<x-slot:indicator>
<x-badge label="⇘ " size="sm" color="info"/>
</x-slot:indicator>
<x-button>Button</x-button>
</x-indicator>
</div>
<!-- Using attributes -->
<div class="grid grid-rows-subgrid grid-cols-[auto_auto_auto] col-start-4 row-span-3 gap-4">
<x-input class="indicator min-w-60" title="Input" helper="Help text">
<x-badge color="success" size="sm" class="indicator-item indicator-start" label="⇖"/>
</x-input>
<x-input class="indicator min-w-60" title="Input" helper="Help text">
<x-badge color="success" size="sm" class="indicator-item indicator-top indicator-center" label="⇑"/>
</x-input>
<x-input class="indicator min-w-60" title="Input" helper="Help text">
<x-badge color="success" size="sm" class="indicator-item" label="⇗"/>
</x-input>
<x-input class="indicator min-w-60" title="Input" helper="Help text">
<x-badge color="success" size="sm" class="indicator-item indicator-middle indicator-start" label="⇐"/>
</x-input>
<span></span>
<x-input class="indicator min-w-60" title="Input" helper="Help text">
<x-badge color="success" size="sm" class="indicator-item indicator-middle" label="⇒"/>
</x-input>
<x-input class="indicator min-w-60" title="Input" helper="Help text">
<x-badge color="success" size="sm" class="indicator-item indicator-bottom indicator-start" label="⇙"/>
</x-input>
<x-input class="indicator min-w-60" title="Input" helper="Help text">
<x-badge color="success" size="sm" class="indicator-item indicator-bottom indicator-center" label="⇓"/>
</x-input>
<x-input class="indicator min-w-60" title="Input" helper="Help text">
<x-badge color="success" size="sm" class="indicator-item indicator-bottom" label="⇘"/>
</x-input>
</div>
#Multiple indicators
Nest indicators inside one another with different positions to have several indicators around a component.
Alternatively, you may use the indicator , indicator-item and indicator-{position} classes to achieve the same result.
<x-indicator position="bottom-end">
<x-slot:indicator>
<x-badge color="warning" size="sm" label="99+"/>
</x-slot:indicator>
<x-indicator color="info">
<x-button>Inbox</x-button>
</x-indicator>
</x-indicator>
<x-input class="indicator">
<x-badge color="error" size="xs" class="indicator-item px-0 py-0 size-2 rounded-full"/>
<x-badge color="error" size="xs" class="indicator-item indicator-bottom" label="Required"/>
</x-input>
#No indicator
If you use <x-indicator> in a loop and not all elements should show an indicator, you can avoid having to thanks to the no-indicator or the transparent attributes.
Below is a comparative example of how to do it without the attributes first, then with each. The latter 2 examples are a few lines shorter.
Loop with a conditional
@for ($i = 1; $i <= 5; $i++)
@if ($i > 3)
<x-button>Button #{{ $i }}</x-button>
@else
<x-indicator color="success">
<x-button>Button #{{ $i }}</x-button>
</x-indicator>
@endif
@endfor
Using no-indicator
@for ($i = 1; $i <= 5; $i++)
<x-indicator color="success" :no-indicator="$i > 3">
<x-button>Button #{{ $i }}</x-button>
</x-indicator>
@endfor
Using transparent
@for ($i = 1; $i <= 5; $i++)
<x-indicator color="success" :transparent="$i > 3">
<x-button>Button #{{ $i }}</x-button>
</x-indicator>
@endfor
The difference between no-indicator and transparent is that the former results in the same DOM as when an indicator is effectively shown. In contrast, transparent simply skips rendering the <div> entirely to render the code inside <x-indicator> directly.
More classically, a loop with proper class binding and @if condition can do the trick, though still with a bit more code than the above alternatives.
@for ($i = 1; $i <= 5; $i++)
<x-input label="Input #{{ $i }}" :class="$i < 3 ? 'indicator' : null">
@if ($i < 3)
<span class="indicator-item status status-success"></span>
@endif
</x-input>
@endfor
#Examples
#Indicator on an input title
You can put an indicator inside an input title slot to have it stick closer to the text.
<x-input class="min-w-60" title="Component title">
<x-slot:title>
<x-indicator class="pe-1" color="info">
Input title
</x-indicator>
</x-slot:title>
</x-input>
#Troubleshooting
#Indicator overlapping on the next control
In tight layouts, indicator may overlap on the next control. You should add a margin on the indicator to prevent that from happening so that it is pushed back inside its control.
In the below example, the indicator slot is pushed left and up to avoid the issue.
<!-- Incorrect: Overlap -->
<x-indicator class="w-full" position="bottom-end">
<x-slot:indicator>
<x-badge label="Required" size="sm" color="warning"/>
</x-slot:indicator>
<x-input label="Input with indicator"/>
</x-indicator>
<x-input label="Input"/>
<!-- Correct: No overlap -->
<x-indicator class="w-full" position="bottom-end">
<x-slot:indicator class="me-7 mb-1">
<x-badge label="Required" size="sm" color="success"/>
</x-slot:indicator>
<x-input label="Input with indicator (with margins)"/>
</x-indicator>
<x-input label="Input"/>
<x-input label="Input"/>
<x-input label="Input"/>