Maskow Labs Logo Livewire Components

Statistics

Statistics components are used to display key metrics, numbers, and data points in a visually appealing format.

€12,345 
1<x-statistic.number value="€12,345" label="Monthly Revenue" icon="currency-euro--outline" href="#" />

Number Statistics

Display numerical data with labels using the x-statistic.number component. The basic statistic shows a value with an optional label for context.

1,247 
1<x-statistic.number value="1,247" label="Total Users" />

With Icons

Add visual context to your statistics by including icons alongside the numbers. Icons help users quickly understand what each statistic represents.

98.5% 
1<x-statistic.number value="98.5%" label="Server Uptime" icon="server--outline" />

With Help Text

Provide additional context with help tooltips for more detailed explanations.

Help text appears as a tooltip when hovering over the help icon.

98.5% 
1<x-statistic.number value="98.5%" label="Conversion Rate" icon="chart-bar--outline" help="Percentage of visitors who completed a purchase" />

Clickable Statistics

Make statistics interactive by adding links to detailed views or related pages.

Use the href attribute to make statistics clickable. The navigate attribute controls Livewire navigation.

15 
1<x-statistic.number href="#" value="15" label="Support Tickets" icon="ticket--outline" />
2 
3{{-- Prevent 'wire:navigate' by adding :navigate="false" --}}
4<x-statistic.number href="#" :navigate="false" value="15" label="Support Tickets" icon="ticket--outline" />

Different Types

Customize the appearance of statistics using different type variations. The type attribute allows you to change the styling and layout of the statistic component.

1,247
1,247
1,247
1,247
1,247
1,247
1,247
1,247
1,247 
1<x-statistic.number type="primary" value="1,247" label="Total Users" icon="users--outline" />
2<x-statistic.number type="orange" value="1,247" label="Total Users" icon="users--outline" />
3<x-statistic.number type="red" value="1,247" label="Total Users" icon="users--outline" />
4<x-statistic.number type="green" value="1,247" label="Total Users" icon="users--outline" />
5<x-statistic.number type="blue" value="1,247" label="Total Users" icon="users--outline" />
6<x-statistic.number type="purple" value="1,247" label="Total Users" icon="users--outline" />
7<x-statistic.number type="pink" value="1,247" label="Total Users" icon="users--outline" />
8<x-statistic.number type="teal" value="1,247" label="Total Users" icon="users--outline" />
9<x-statistic.number type="gray" value="1,247" label="Total Users" icon="users--outline" />