Pill
Pills ermöglichen es dem User, Informationen einzuholen, eine Auswahl zu treffen, Inhalte zu filtern oder Aktionen auszulösen.
- Schrack Seconet
- Neutral
- Verwendung
Beispiel
Man kann zwischen Pills differenzieren, die dem User nur Informationen vermitteln, und Pills, die es dem User erlauben, mit ihnen zu interagieren (Interactive Pills).
Pill
Von der Pill gibt es sechs verschiedene Varianten:
- Primary
- Secondary
- Info
- Error
- Warning
- Success
Außerdem gibt es die Pill in folgenden drei Größen, die alle mit oder ohne Icon bzw. Status angezeigt werden können:
- X-Small
- Small
- Medium
Die Pill kann auch verwendet werden, um aktive Filterkategorien anzuzeigen. Hierbei enthält die Pill ein Schlüssel-Wert-Paar, das einer gefilterten Kategorie entspricht.
Interactive Pill
Die Interactive Pill ist das interaktive Gegenstück zur statischen Pill. Im Dark Mode verfügt sie in allen Zuständen über einen Border, der für optimale Erkennbarkeit sorgt.
Auch diese gibt es in drei verschiedenen Varianten bzw. Größen:
- X-Small
- Small
- Medium
Der User erkennt an der Cursor-Änderung sowie an den weiter unten beschriebenen Interaktionszuständen, dass es sich um ein interaktives Element handelt. Dies ist in den Live Demos unten ersichtlich. Es bestehen jedoch auch weitere Möglichkeiten, um Interaktionen zu kennzeichnen:
- Badge (links oder rechts)
- Icon
- Dropdown
- Close-Icon (diese Interactive Pills sind durch Anklicken entfernbar)
Interaktionen
Jegliche Interaktion ist nur mit der Interactive Pill möglich. Sie kann sich daher in vier Zuständen befinden, welche Interaktion unterstützen:
- Default
- Hover
- Active / aktiv
- Disabled / deaktiviert
Für den Hover-Effekt der ausgewählten Interactive Pill wird im Light Mode mit Schatten gearbeitet; im Dark Mode wird die Farbe geändert. Zudem ist die Interactive Pill eine der Ausnahmen an Komponenten, welche einen Border im Dark Mode haben dürfen. Der Grund dafür ist, dass die Interactive Pill entweder innerhalb einer Component (Component Background) oder direkt in der Applikation (Application Background) platziert werden kann und der Border dabei hilft, bessere Sichtbarkeit zu gewährleisten. Mehr dazu kann auf der Seite Theming nachgelesen werden.
In diesem interaktiven Prototypen können alle States getestet werden.