Display Components

Display components format and present data consistently across the application.

Display Badge

The <x-display.badge> component creates colored badges for labels and status indicators.

Usage

<x-display.badge entity="items">
    Legacy: {{ $item->backward_compatibility }}
</x-display.badge>

<x-display.badge entity="tags">
    {{ $tag->internal_name }}
</x-display.badge>

System Properties

The <x-system-properties> component displays metadata like created/updated timestamps.

Props

Prop Type Required Description
created datetime No Created timestamp
updated datetime No Updated timestamp

Usage

<x-system-properties
    :created="$item->created_at"
    :updated="$item->updated_at"
/>

Format Components

Format components are in resources/views/components/format/:

Date Formatting

<!-- Display formatted date -->
{{ $item->created_at?->format('Y-m-d H:i') }}

<!-- Or use Carbon methods -->
{{ $item->created_at?->diffForHumans() }}