Components

Snippet

Basics

The Snippet component allows you to display text as code with the ability to copy to clipboard.

make(
    string $value = '',
    string|Color $color = Color::INFO
)
make(
    string $value = '',
    string|Color $color = Color::INFO
)
  • $value - text displayed in the snippet,
  • $color - color (string or Enum).

The following options are available:

 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\Snippet;
 
Snippet::make('composer require moonshine/moonshine', Color::PRIMARY);
Snippet::make('composer require moonshine/moonshine', Color::SECONDARY);
Snippet::make('composer require moonshine/moonshine', Color::SUCCESS);
Snippet::make('composer require moonshine/moonshine', Color::INFO);
Snippet::make('composer require moonshine/moonshine', Color::WARNING);
Snippet::make('composer require moonshine/moonshine', Color::ERROR);
// or strings
Snippet::make('composer require moonshine/moonshine', 'purple');
Snippet::make('composer require moonshine/moonshine', 'pink');
Snippet::make('composer require moonshine/moonshine', 'blue');
Snippet::make('composer require moonshine/moonshine', 'green');
Snippet::make('composer require moonshine/moonshine', 'yellow');
Snippet::make('composer require moonshine/moonshine', 'red');
Snippet::make('composer require moonshine/moonshine', 'gray');
 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\Snippet;
 
Snippet::make('composer require moonshine/moonshine', Color::PRIMARY);
Snippet::make('composer require moonshine/moonshine', Color::SECONDARY);
Snippet::make('composer require moonshine/moonshine', Color::SUCCESS);
Snippet::make('composer require moonshine/moonshine', Color::INFO);
Snippet::make('composer require moonshine/moonshine', Color::WARNING);
Snippet::make('composer require moonshine/moonshine', Color::ERROR);
// or strings
Snippet::make('composer require moonshine/moonshine', 'purple');
Snippet::make('composer require moonshine/moonshine', 'pink');
Snippet::make('composer require moonshine/moonshine', 'blue');
Snippet::make('composer require moonshine/moonshine', 'green');
Snippet::make('composer require moonshine/moonshine', 'yellow');
Snippet::make('composer require moonshine/moonshine', 'red');
Snippet::make('composer require moonshine/moonshine', 'gray');
<x-moonshine::snippet color="primary">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="secondary">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="success">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="info">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="warning">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="error">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="purple">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="pink">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="blue">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="green">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="yellow">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="red">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="gray">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="primary">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="secondary">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="success">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="info">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="warning">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="error">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="purple">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="pink">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="blue">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="green">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="yellow">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="red">composer require moonshine/moonshine</x-moonshine::snippet>
<x-moonshine::snippet color="gray">composer require moonshine/moonshine</x-moonshine::snippet>

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

Usage with fields

When using the copy() method on input fields, the Snippet component is automatically applied for displaying the value in preview mode.

 namespaces
use MoonShine\UI\Fields\Text;
 
Text::make('Code', 'code')
    ->copy()
 namespaces
use MoonShine\UI\Fields\Text;
 
Text::make('Code', 'code')
    ->copy()

More details about the copy() method can be found in the Text section.