Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add mark

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::mark> renders a real <mark>: text highlighted for reference, most often a search term inside a result.

Basic Usage

Order ORD-KO55AG18 was marked as paid.

<p class="text-sm">Order <x-aura::mark>ORD-KO55AG18</x-aura::mark> was marked as paid.</p>
<p>Order <x-aura::mark>{{ $reference }}</x-aura::mark> was marked as paid.</p>

Props

Prop Type Default Description
color string 'warning' primary, success, warning, danger, info.

Colours

warning primary success danger info 
<div class="flex flex-wrap gap-2 text-sm">
    <x-aura::mark>warning</x-aura::mark>
    <x-aura::mark color="primary">primary</x-aura::mark>
    <x-aura::mark color="success">success</x-aura::mark>
    <x-aura::mark color="danger">danger</x-aura::mark>
    <x-aura::mark color="info">info</x-aura::mark>
</div>

Accessibility

Every colour pairs a -100 background with -900 text and clears the 4.5:1 threshold; the pairs are asserted in the test suite, in both themes.

Colour alone still carries no meaning to someone who cannot see it. When the highlight means something beyond "look here", say so in the text as well.

Highlighting a whole paragraph highlights nothing — <mark> works because it is rare on the page.