Components

Badge

Basics

If you need to place a badge on the page, use Badge component.

make(
    string $value = '',
    string|Color $color = Color::PURPLE,
    ?string $icon = null
)
make(
    string $value = '',
    string|Color $color = Color::PURPLE,
    ?string $icon = null
)
  • $value - text displayed in the badge,
  • $color - color code (string or Enum),
  • $icon - icon name.

The following badges are available:

 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\Badge;
 
Badge::make('Primary', Color::PRIMARY);
Badge::make('Secondary', Color::SECONDARY);
Badge::make('Success', Color::SUCCESS);
Badge::make('Info', Color::INFO);
Badge::make('Warning', Color::WARNING);
Badge::make('Error', Color::ERROR);
// or strings
Badge::make('Purple','purple');
Badge::make('Pink','pink');
Badge::make('Blue','blue');
Badge::make('Green','green');
Badge::make('Yellow','yellow');
Badge::make('Red', 'red');
Badge::make('Gray', 'gray');
 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\Badge;
 
Badge::make('Primary', Color::PRIMARY);
Badge::make('Secondary', Color::SECONDARY);
Badge::make('Success', Color::SUCCESS);
Badge::make('Info', Color::INFO);
Badge::make('Warning', Color::WARNING);
Badge::make('Error', Color::ERROR);
// or strings
Badge::make('Purple','purple');
Badge::make('Pink','pink');
Badge::make('Blue','blue');
Badge::make('Green','green');
Badge::make('Yellow','yellow');
Badge::make('Red', 'red');
Badge::make('Gray', 'gray');
<x-moonshine::badge color="primary">Primary</x-moonshine::badge>
<x-moonshine::badge color="secondary">Secondary</x-moonshine::badge>
<x-moonshine::badge color="success">Success</x-moonshine::badge>
<x-moonshine::badge color="info">Info</x-moonshine::badge>
<x-moonshine::badge color="warning">Warning</x-moonshine::badge>
<x-moonshine::badge color="error">Error</x-moonshine::badge>
<x-moonshine::badge color="purple">Purple</x-moonshine::badge>
<x-moonshine::badge color="pink">Pink</x-moonshine::badge>
<x-moonshine::badge color="blue">Blue</x-moonshine::badge>
<x-moonshine::badge color="green">Green</x-moonshine::badge>
<x-moonshine::badge color="yellow">Yellow</x-moonshine::badge>
<x-moonshine::badge color="red">Red</x-moonshine::badge>
<x-moonshine::badge color="gray">Gray</x-moonshine::badge>
<x-moonshine::badge color="primary">Primary</x-moonshine::badge>
<x-moonshine::badge color="secondary">Secondary</x-moonshine::badge>
<x-moonshine::badge color="success">Success</x-moonshine::badge>
<x-moonshine::badge color="info">Info</x-moonshine::badge>
<x-moonshine::badge color="warning">Warning</x-moonshine::badge>
<x-moonshine::badge color="error">Error</x-moonshine::badge>
<x-moonshine::badge color="purple">Purple</x-moonshine::badge>
<x-moonshine::badge color="pink">Pink</x-moonshine::badge>
<x-moonshine::badge color="blue">Blue</x-moonshine::badge>
<x-moonshine::badge color="green">Green</x-moonshine::badge>
<x-moonshine::badge color="yellow">Yellow</x-moonshine::badge>
<x-moonshine::badge color="red">Red</x-moonshine::badge>
<x-moonshine::badge color="gray">Gray</x-moonshine::badge>

primary secondary success warning error info purple pink blue green yellow red gray

Icon

The icon parameter allows you to add an icon to the badge.

 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\Badge;
 
Badge::make('Active', Color::SUCCESS, 'check');
Badge::make('Pending', Color::WARNING, 'clock');
Badge::make('Users', Color::PURPLE, 'users');
 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\Badge;
 
Badge::make('Active', Color::SUCCESS, 'check');
Badge::make('Pending', Color::WARNING, 'clock');
Badge::make('Users', Color::PURPLE, 'users');
<x-moonshine::badge color="success" :icon="'check'">Active</x-moonshine::badge>
<x-moonshine::badge color="warning" :icon="'clock'">Pending</x-moonshine::badge>
<x-moonshine::badge color="purple" :icon="'users'">Users</x-moonshine::badge>
<x-moonshine::badge color="success" :icon="'check'">Active</x-moonshine::badge>
<x-moonshine::badge color="warning" :icon="'clock'">Pending</x-moonshine::badge>
<x-moonshine::badge color="purple" :icon="'users'">Users</x-moonshine::badge>

A list of all available icons can be found in the Icons section.