Components

PrettyLimit

Basics

The PrettyLimit component allows displaying text with a limited width, showing the full text on hover.

make(
    string $value = '',
    string|null|Color $color = Color::SECONDARY,
    ?string $label = null,
    ?int $limit = 150
)
make(
    string $value = '',
    string|null|Color $color = Color::SECONDARY,
    ?string $label = null,
    ?int $limit = 150
)
  • $value - displayed text,
  • $color - background color (string or Enum),
  • $label - additional label,
  • $limit - width in pixels (minimum 100).

The following colors are available:

 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\PrettyLimit;
 
PrettyLimit::make('Long text that will be truncated', Color::PRIMARY);
PrettyLimit::make('Long text that will be truncated', Color::SECONDARY);
PrettyLimit::make('Long text that will be truncated', Color::SUCCESS);
PrettyLimit::make('Long text that will be truncated', Color::INFO);
PrettyLimit::make('Long text that will be truncated', Color::WARNING);
PrettyLimit::make('Long text that will be truncated', Color::ERROR);
// or strings
PrettyLimit::make('Long text that will be truncated', 'purple');
PrettyLimit::make('Long text that will be truncated', 'pink');
PrettyLimit::make('Long text that will be truncated', 'blue');
PrettyLimit::make('Long text that will be truncated', 'green');
PrettyLimit::make('Long text that will be truncated', 'yellow');
PrettyLimit::make('Long text that will be truncated', 'red');
PrettyLimit::make('Long text that will be truncated', 'gray');
 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\PrettyLimit;
 
PrettyLimit::make('Long text that will be truncated', Color::PRIMARY);
PrettyLimit::make('Long text that will be truncated', Color::SECONDARY);
PrettyLimit::make('Long text that will be truncated', Color::SUCCESS);
PrettyLimit::make('Long text that will be truncated', Color::INFO);
PrettyLimit::make('Long text that will be truncated', Color::WARNING);
PrettyLimit::make('Long text that will be truncated', Color::ERROR);
// or strings
PrettyLimit::make('Long text that will be truncated', 'purple');
PrettyLimit::make('Long text that will be truncated', 'pink');
PrettyLimit::make('Long text that will be truncated', 'blue');
PrettyLimit::make('Long text that will be truncated', 'green');
PrettyLimit::make('Long text that will be truncated', 'yellow');
PrettyLimit::make('Long text that will be truncated', 'red');
PrettyLimit::make('Long text that will be truncated', 'gray');
<x-moonshine::pretty-limit color="primary">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="secondary">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="success">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="info">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="warning">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="error">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="purple">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="pink">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="blue">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="green">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="yellow">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="red">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="gray">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="primary">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="secondary">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="success">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="info">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="warning">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="error">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="purple">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="pink">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="blue">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="green">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="yellow">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="red">Long text that will be truncated</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="gray">Long text that will be truncated</x-moonshine::pretty-limit>

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

Label

The label parameter allows adding an additional label before the text.

 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\PrettyLimit;
 
PrettyLimit::make('Tariff name with long description', Color::PRIMARY, '2 weeks');
// or via method
PrettyLimit::make('Tariff name with long description')
    ->color(Color::SUCCESS)
    ->label('Active');
 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\PrettyLimit;
 
PrettyLimit::make('Tariff name with long description', Color::PRIMARY, '2 weeks');
// or via method
PrettyLimit::make('Tariff name with long description')
    ->color(Color::SUCCESS)
    ->label('Active');
<x-moonshine::pretty-limit color="primary" label="2 weeks">
    Tariff name with long description
</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="primary" label="2 weeks">
    Tariff name with long description
</x-moonshine::pretty-limit>

Width limit

The limit parameter allows setting the maximum width of the component in pixels. The default value is 150px.

 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\PrettyLimit;
 
PrettyLimit::make('Very long text', Color::INFO, limit: 200);
// or via method
PrettyLimit::make('Very long text')
    ->limit(250);
 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Components\PrettyLimit;
 
PrettyLimit::make('Very long text', Color::INFO, limit: 200);
// or via method
PrettyLimit::make('Very long text')
    ->limit(250);
<x-moonshine::pretty-limit color="info" :limit="200">
    Very long text
</x-moonshine::pretty-limit>
<x-moonshine::pretty-limit color="info" :limit="200">
    Very long text
</x-moonshine::pretty-limit>

The minimum width value is 100 pixels.

Field integration

To use PrettyLimit in fields, the prettyLimit() method is available in the Text field.

prettyLimit(
    null|Color|string|Closure $color = null,
    null|string|Closure $label = null,
    null|int|Closure $limit = null
)
prettyLimit(
    null|Color|string|Closure $color = null,
    null|string|Closure $label = null,
    null|int|Closure $limit = null
)

This method modifies the field display in preview mode, wrapping the value in a PrettyLimit component.

 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Fields\Text;
 
Text::make('Title', 'title')
    ->prettyLimit(Color::PRIMARY);
 
// with dynamic values
Text::make('Status', 'status')
    ->prettyLimit(
        color: fn($value, $field) => $value === 'active' ? Color::SUCCESS : Color::ERROR,
        label: fn($value, $field) => $value === 'active' ? 'Active' : 'Inactive',
        limit: 200
    );
 namespaces
use MoonShine\Support\Enums\Color;
use MoonShine\UI\Fields\Text;
 
Text::make('Title', 'title')
    ->prettyLimit(Color::PRIMARY);
 
// with dynamic values
Text::make('Status', 'status')
    ->prettyLimit(
        color: fn($value, $field) => $value === 'active' ? Color::SUCCESS : Color::ERROR,
        label: fn($value, $field) => $value === 'active' ? 'Active' : 'Inactive',
        limit: 200
    );

The color, label, and limit parameters support Closure for dynamic value calculation based on field data.