mirror of
https://github.com/filamentphp/filament.git
synced 2026-10-13 17:36:15 +08:00
Dan Harrin
09aaea6d5d
* screenshots * fix cut off sidebar * Screenshots * Screenshots * retake * fix loading data issue * retake * screenshots * Update custom-toolbar.jpg * retake * ss * retake * ss * ss * ss * ss * ss * ss * ss * ss * Update dashboard.jpg * ss * Update openable.jpg * ss * ss * ss * Update database.sqlite * Update database.sqlite * ss * ss * ss * ss * ss * ss * clean up * cs
1.8 KiB
1.8 KiB
title
| title |
|---|
| Badge Blade component |
import AutoScreenshot from "@components/AutoScreenshot.astro"
Introduction
The badge component is used to render a small box with some text inside:
<x-filament::badge>
New
</x-filament::badge>
Setting the size of a badge
By default, the size of a badge is "medium". You can make it "extra small" or "small" by using the size attribute:
<x-filament::badge size="xs">
New
</x-filament::badge>
<x-filament::badge size="sm">
New
</x-filament::badge>
Changing the color of the badge
By default, the color of a badge is "primary". You can change it to be danger, gray, info, success or warning by using the color attribute:
<x-filament::badge color="danger">
New
</x-filament::badge>
<x-filament::badge color="gray">
New
</x-filament::badge>
<x-filament::badge color="info">
New
</x-filament::badge>
<x-filament::badge color="success">
New
</x-filament::badge>
<x-filament::badge color="warning">
New
</x-filament::badge>
Adding an icon to a badge
You can add an icon to a badge by using the icon attribute:
<x-filament::badge icon="heroicon-m-sparkles">
New
</x-filament::badge>
You can also change the icon's position to be after the text instead of before it, using the icon-position attribute:
<x-filament::badge
icon="heroicon-m-sparkles"
icon-position="after"
>
New
</x-filament::badge>