Diggi Docs

Badge

Badges werden genutzt, um Charakteristiken eines Objekts hervorzuheben, wie z.B. die Anzahl ungelesener Nachrichten oder den Status einer Produktverfügbarkeit.

Verwendung

Der blaue Badge wird nur als normaler Hinweis verwendet.
Die Farben Rot und Gelb werden nur verwendet, wenn ein Fehler oder eine Warnung vorliegt. Diese Varianten werden immer in Kombination mit einer Notification eingesetzt.

Ein Badge wird in der Regel mit einem Icon kombiniert. Beispiel: In dieser Kombination kann der Badge dem User anzeigen, wieviele Artikel im Warenkorb enthalten sind, wieviel neue Nachrichten angekommen sind, etc. ...

Die Ziffern innerhalb des Badges können ein- bis dreistellig werden. Mehr als dreistellige Zahlen werden als 999+ dargestellt.
Die Varianten bzw. die Farbigkeit steht nicht im Zusammenhang mit der Anzahl der Ziffern. Alle Varianten können mit allen Möglichkeiten an Ziffern kombiniert werden.

Badges können auch Texte enthalten. Diese werden in der Regel inline platziert, z.B. um einen Status auszuzeichnen. .

Eigenschaften

Name	Type	Default Value	Description
type	"info" \| "warning" \| "error" \| "success" \| "purple" \| "blue" \| "green" \| "turquoise" \| "gray" = "info"	undefined	Type of Attribute (normal, warning, error)
size	BadgeSize	undefined	Badgesize
label	string	undefined	Label to Display
isOnIcon	boolean	undefined	Set to true if you place badge on an icon
icon	string	undefined	Icon IN Badge (position left)
title	string	undefined	Title on hover
disabled	boolean	undefined	Set to true if badge is disabled
style	string	undefined	Additional css styles

Beispiele

Info (Default)

Warning

Error

Success

Purple

Blue

Turquoise

Green

Gray

Badges on Icon

999+

Badges small on Icon

Inline

Here is some awesome text.

lorem ipsum

Badge with very long label

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?