Badges

Default 
<x-app-ui::badge>
    Normal badge
</x-app-ui::badge>

<x-app-ui::badge size="lg">
    Large badge
</x-app-ui::badge>
Primary 
<x-app-ui::badge color="primary">
    Normal badge
</x-app-ui::badge>

<x-app-ui::badge color="primary" size="lg">
    Large badge
</x-app-ui::badge>
Danger 
<x-app-ui::badge color="danger">
    Normal badge
</x-app-ui::badge>

<x-app-ui::badge color="danger" size="lg">
    Large badge
</x-app-ui::badge>
Success 
<x-app-ui::badge color="success">
    Normal badge
</x-app-ui::badge>

<x-app-ui::badge color="success" size="lg">
    Large badge
</x-app-ui::badge>
Warning 
<x-app-ui::badge color="warning">
    Normal badge
</x-app-ui::badge>

<x-app-ui::badge color="warning" size="lg">
    Large badge
</x-app-ui::badge>
With icon prefix 
<x-app-ui::badge icon="iconic-tag" color="primary">
    Normal badge
</x-app-ui::badge>

<x-app-ui::badge
    icon="iconic-shield-tick"
    color="primary"
    size="lg"
>
    Large badge
</x-app-ui::badge>
With icon suffix 
<x-app-ui::badge
    icon="iconic-tag"
    icon-position="after"
    color="primary"
>
    Normal badge
</x-app-ui::badge>

<x-app-ui::badge
    icon="iconic-shield-tick"
    icon-position="after"
    color="primary"
    size="lg"
>
    Large badge
</x-app-ui::badge>

API

app-ui::badge

Attributes

Name Default Options Notes
color danger, primary, success, warning
icon Any Blade icon component name
icon-position before after, before
size md lg, md

Slots

Name Notes
Main Contains the text content of the badge.