Zum Inhalt springen
GEDISA UI

Dokumentation

Komponenten

Badges

Kompakte Kennzeichnungen für Status, Kategorien und ergänzende Informationen.

Verwendung

Ein Badge ergänzt Inhalte um eine kurze Information. Verwende einen verständlichen Text, damit die Bedeutung auch ohne Farbe erkennbar bleibt.

Standard-Badge
Badge
blade 
<gedisa:badge>Badge</gedisa:badge>

Größen

Drei Größen passen das Badge an die Dichte der Oberfläche an.

Small, Medium und Large
Small
Medium
Large
blade 
<gedisa:badge size="sm">Small</gedisa:badge>
<gedisa:badge>Medium</gedisa:badge>
<gedisa:badge size="lg">Large</gedisa:badge>

Varianten

Die Standardvariante heißt modern. Mit solid erhält das Badge eine gefüllte Darstellung.

Modern und Solid
Modern
Solid
blade 
<gedisa:badge color="brand">Modern</gedisa:badge>
<gedisa:badge color="brand" variant="solid">Solid</gedisa:badge>

Runde Badges

Mit der Eigenschaft rounded wird das Badge zu einer runden Kennzeichnung.

Runde Badges
rounded
blade 
<gedisa:badge rounded>rounded</gedisa:badge>

Farben

Nutze semantische Farben für Zustände

Semantische Farben
Entwurf
Neu
Abgeschlossen
Ausstehend
Fehlgeschlagen
blade 
<gedisa:badge>Entwurf</gedisa:badge>
<gedisa:badge color="brand">Neu</gedisa:badge>
<gedisa:badge color="success">Abgeschlossen</gedisa:badge>
<gedisa:badge color="warning">Ausstehend</gedisa:badge>
<gedisa:badge color="error">Fehlgeschlagen</gedisa:badge>

Alle Farben der Farbpalette stehen zur Auswahl

weitere Farben
White
Gray
Gray blue
Green
Blue light
Blue
Blue dark
Indigo
Purple
Fuchsia
Pink
Orange dark
Orange
Yellow
blade 
<gedisa:badge color="white">White</gedisa:badge>
<gedisa:badge color="gray">Gray</gedisa:badge>
<gedisa:badge color="gray-blue">Gray blue</gedisa:badge>
<gedisa:badge color="green">Green</gedisa:badge>
<gedisa:badge color="blue-light">Blue Light</gedisa:badge>
<gedisa:badge color="blue">Blue</gedisa:badge>
<gedisa:badge color="blue-dark">Blue Dark</gedisa:badge>
<gedisa:badge color="indigo">Indigo</gedisa:badge>
<gedisa:badge color="purple">Purple</gedisa:badge>
<gedisa:badge color="pink">Pink</gedisa:badge>
<gedisa:badge color="orange-dark">Orange dark</gedisa:badge>
<gedisa:badge color="orange">Orange</gedisa:badge>
<gedisa:badge color="yellow">Yellow</gedisa:badge>

Icons

Füge den Badges Icons mit icon oder icon:trailing hinzu. Mit icon:variant kann die Darstellung des Icons angepasst werden.

Icon-Varianten
Users
Users
Files
Videos
blade 
<gedisa:badge rounded icon:variant="outline" icon="dot">Users</gedisa:badge>
<gedisa:badge rounded icon:variant="outline" icon="user-circle">Users</gedisa:badge>
<gedisa:badge rounded icon="document-text">Files</gedisa:badge>
<gedisa:badge rounded icon:trailing="video-camera">Videos</gedisa:badge>
Icon only
blade 
<gedisa:badge size="sm" icon="plus"/>
<gedisa:badge icon="plus"/>
<gedisa:badge size="lg" icon="plus"/>
<gedisa:badge size="sm" rounded icon="plus"/>
<gedisa:badge rounded icon="plus"/>
<gedisa:badge size="lg" rounded icon="plus"/>
Icons mit Dot
Users
Users
Users
Users
Users
Users
Users
Users
Users
Users
blade 
<gedisa:badge icon="dot" icon:color="brand" color="white">Users</gedisa:badge>
<gedisa:badge icon="dot" icon:color="error" color="white">Users</gedisa:badge>
<gedisa:badge icon="dot" icon:color="pink" color="white">Users</gedisa:badge>
<gedisa:badge icon="dot" icon:color="purple" color="white">Users</gedisa:badge>
<gedisa:badge icon="dot" icon:color="blue" color="white">Users</gedisa:badge>

<gedisa:badge icon="dot-ring" icon:color="brand" color="white">Users</gedisa:badge>
<gedisa:badge icon="dot-ring" icon:color="error" color="white">Users</gedisa:badge>
<gedisa:badge icon="dot-ring" icon:color="pink" color="white">Users</gedisa:badge>
<gedisa:badge icon="dot-ring" icon:color="purple" color="white">Users</gedisa:badge>
<gedisa:badge icon="dot-ring" icon:color="blue" color="white">Users</gedisa:badge>

Als Button

Mache den Badge als klickbares Button Element.

Beispiel
blade 
<gedisa:badge as="button" rounded icon="plus" size="lg">Amount</gedisa:badge>

Mit close Button

Füge dem Bade ein close-Button hinzu

Beispiel
Admin
blade 
<gedisa:badge>
    Admin
    <gedisa:badge.close aria-label="Admin entfernen"/>
</gedisa:badge>

Inset

Wenn Badges zusammen mit Inline-Text verwendet werden, kann es aufgrund des zusätzlichen Abstands um das Badge herum zu Problemen mit dem Abstand kommen. Die Eigenschaft „inset“ wird verwendet, um oben und unten am Badge negative Ränder festzulegen und dies zu vermeiden.

Beispiel
Page builder
New
blade 
<gedisa:heading>
    Page builder
    <gedisa:badge color="brand">New</gedisa:badge>
</gedisa:heading>

Leading & Trailing Slots

In Leading oder Trailing Slots können weitere Badges oder Icons eingefügt werden. Dies ist besonders nützlich, um den Status eines Elements anzuzeigen.

Beispiel
Success
You’ve updated your profile and details
There was a problem with that action
Warning
Error
There was a problem with that action
blade 
<gedisa:badge rounded color="success">
    <x-slot:leading>
        <gedisa:badge rounded color="white">Success</gedisa:badge>
    </x-slot:leading>
    You’ve updated your profile and details
</gedisa:badge>

<gedisa:badge rounded color="error">
    There was a problem with that action
    <x-slot:trailing>
        <gedisa:badge rounded color="white" icon:trailing="arrow-right">Warning</gedisa:badge>
    </x-slot:trailing>
</gedisa:badge>
<gedisa:badge rounded color="white">
    <x-slot:leading>
        <gedisa:badge color="white" rounded icon="dot-ring" icon:color="error">
            Error
        </gedisa:badge>
    </x-slot:leading>
    There was a problem with that action
</gedisa:badge>
Mit Icons
New Feature
We've released a new feature
New Feature
We've released a new feature
Just to let you know this might be a problem
Warning
blade 
<gedisa:badge rounded color="white">
    <x-slot:leading>
        <gedisa:badge color="white" icon="dot-ring" icon:color="brand">
            New Feature
        </gedisa:badge>
    </x-slot:leading>
    We've released a new feature
    <x-slot:trailing>
        <gedisa:icon.arrow-right class="size-4 mr-2"/>
    </x-slot:trailing>
</gedisa:badge>

<gedisa:badge rounded color="brand">
    <x-slot:leading>
        <gedisa:badge rounded color="white">
            New Feature
        </gedisa:badge>
    </x-slot:leading>
    We've released a new feature
    <x-slot:trailing>
        <gedisa:icon.arrow-right class="size-4 mr-2"/>
    </x-slot:trailing>
</gedisa:badge>

<gedisa:badge rounded color="white">
    <gedisa:icon.dot-ring
        class="text-gedisa-warning-600 [&_circle]:fill-gedisa-warning-500 [&_circle]:stroke-gedisa-warning-100"/>
    Just to let you know this might be a problem
    <x-slot:trailing>
        <gedisa:badge color="white" icon:trailing="arrow-right">Warning</gedisa:badge>
    </x-slot:trailing>
</gedisa:badge>

Referenz

Diese Übersicht umfasst die oben gezeigten Attribute, Slots und die Close-Unterkomponente.

gedisa:badge

Eigenschaft
Werte
Default
variant Varianten modifier modern, solid modern
size Badge Größen. sm, md, lg md
color default, white, gray, brand, error, warning, success
sowie die Farbpalette 		default
rounded Attribut für gerundete Badges
icon Name eines führenden Icons
icon:trailing Name eines nachgestellten Icons
icon:variant Icon-Varianten micro, outline, solid, mini solid
icon:color Farbname aus der Badge-Farbpalette
as z. B. button div
inset Fügen Sie bestimmten Seiten negative Ränder hinzu.
top, right, bottom, left oder eine beliebige Kombination dieser vier.
leading benannter Slot für vorangestellten Inhalt
trailing benannter Slot für nachgestellten Inhalt