Компоненты

Badge

Основы

Если вам необходимо разместить значок на странице, то воспользуйтесь компонентом Badge.

make(
    string $value = '',
    string|Color $color = Color::PURPLE,
    ?string $icon = null
)
make(
    string $value = '',
    string|Color $color = Color::PURPLE,
    ?string $icon = null
)
  • $value - текст, отображаемый в значке,
  • $color - код цвета (строка или Enum),
  • $icon - название иконки.

Доступны следующие значки:

 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 позволяет добавить иконку в значок.

 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>

Список всех доступных иконок можно найти в разделе Icons.