Badge
A small pill for a status or a count: six tones, soft, solid or outline, a status dot, and 99+.
Demo
DraftNewPaidOverdueFailedBeta
OnlineDegradedDownOutlineSolidSmall
Inbox 3 unread messagesMentions 42Notifications 128 notificationsTasks 7
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/badge.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/badge.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/badge.qwe
view BadgeDemo() = <div.demo-stack> <div.demo-row> <Badge>Draft</Badge> <Badge tone="accent">New</Badge> <Badge tone="success">Paid</Badge> <Badge tone="warning">Overdue</Badge> <Badge tone="danger">Failed</Badge> <Badge tone="info">Beta</Badge> </div> <div.demo-row> <Badge tone="success" dot={true}>Online</Badge> <Badge tone="warning" dot={true} variant="outline">Degraded</Badge> <Badge tone="danger" dot={true} variant="solid">Down</Badge> <Badge variant="outline">Outline</Badge> <Badge tone="accent" variant="solid">Solid</Badge> <Badge size="sm" tone="info">Small</Badge> </div> <div.demo-row> <span>Inbox <Badge tone="danger" variant="solid" count={3} label="unread messages"/></span> <span>Mentions <Badge tone="accent" count={42}/></span> <span>Notifications <Badge tone="danger" variant="solid" count={128} label="notifications"/></span> <span>Tasks <Badge size="sm" count={7}/></span> </div> </div>Source
ui/badge.qwe
// Badge: a small label for a status or a count, shaped as a pill.//// <Badge tone="success" dot={true}>Active</Badge>// <Badge tone="warning" variant="outline">Trial</Badge>// <Badge tone="danger" variant="solid" count={128} label="unread messages"/>//// tone: "neutral" (default), "accent", "success", "warning", "danger" or "info".// variant: "soft" (default), "solid" or "outline". dot: a status dot before the text.// count: shows a number instead of children; above max (99) it shows "99+".// label: what the count is, for screen readers ("128 unread messages").// size: "sm" or "md" (default). For labels people add or remove, use Tag.import ui/theme.qwe use ui_clslet badge_css = css`.ui-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; vertical-align: middle; font: 500 12px/1 var(--ui-font); white-space: nowrap; font-variant-numeric: tabular-nums; --t: var(--ui-muted); --ts: var(--ui-subtle);}.ui-badge-accent { --t: var(--ui-accent); --ts: var(--ui-accent-soft); }.ui-badge-success { --t: var(--ui-success); --ts: var(--ui-success-soft); }.ui-badge-warning { --t: var(--ui-warning); --ts: var(--ui-warning-soft); }.ui-badge-danger { --t: var(--ui-danger); --ts: var(--ui-danger-soft); }.ui-badge-info { --t: var(--ui-info); --ts: var(--ui-info-soft); }.ui-badge-soft { background: var(--ts); color: var(--t); }.ui-badge-neutral.ui-badge-soft { color: var(--ui-fg); }.ui-badge-solid { background: var(--t); color: var(--ui-bg); }.ui-badge-neutral.ui-badge-solid { background: var(--ui-fg); }.ui-badge-outline { border-color: color-mix(in srgb, var(--t) 45%, var(--ui-border)); color: var(--t); }.ui-badge-neutral.ui-badge-outline { color: var(--ui-fg); border-color: var(--ui-border); }.ui-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--t); }.ui-badge-solid.ui-badge-dot::before { background: currentColor; }.ui-badge-count { min-width: 22px; justify-content: center; padding: 0 6px; }.ui-badge-sm { height: 18px; padding: 0 7px; font-size: 11px; }.ui-badge-sm.ui-badge-count { min-width: 18px; padding: 0 5px; }`view Badge(tone: str = "neutral", variant: str = "soft", dot: bool = false, count: int? = null, max: int = 99, label: str? = null, size: str = "md", class: str? = null, children) { style global badge_css let shown = count == null ? null : (count > max ? `${max}+` : str(count)) <span class={ui_cls(["ui-badge", `ui-badge-${tone}`, `ui-badge-${variant}`, dot && "ui-badge-dot", count != null && "ui-badge-count", size != "md" && `ui-badge-${size}`, class])}> {count != null ? [<span aria-hidden={label != null ? "true" : null}>{shown}</span>, label != null && <span.ui-sr>{count} {label}</span>] : children} </span>}Related
AlertA message in the page in six tones and three variants, with an icon, announced to screen readers, and dismissable.5 views · 9 downloadsConnectionStatusSays when the browser goes offline, as a bar across the top or a pill, and that it is back online for a moment.6 views · 7 downloadsErrorPageA 404 or 500 page: the code large, what it means, a search box if wanted, and links to go on from.5 views · 6 downloadsInlineMessageA small one-line message with an icon for its tone (info, success, warning, error), to sit in a form or beside a control.5 views · 7 downloadsLoadingDotsThree dots bouncing in turn, inline, for something short that is on its way; screen readers hear the label.5 views · 6 downloadsLoadingOverlayCovers its content with a spinner and a message while something is busy, keeping the content in place but out of reach.5 views · 5 downloads
Thread
Thread 0 posts
On Badge: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.