NewBadge
A small New, Beta or Updated label beside an item, in tones and variants, that stops showing after a date.
Demo
Reports New: ReportsWorkflows BetaExports UpdatedBilling Soon
Launching next year NewWas new in 2024 Not until 2099
The last two render nothing: one is past its date, one is before its date.
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/new_badge.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/new_badge.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/new_badge.qwe
view NewBadgeDemo() = <div.demo-stack> <div.demo-row style="gap: 20px"> <span>Reports <NewBadge id="new-badge-demo-plain" label="Reports"/></span> <span>Workflows <NewBadge id="new-badge-demo-beta" text="Beta" tone="info" variant="soft"/></span> <span>Exports <NewBadge text="Updated" tone="success" variant="outline" size="sm"/></span> <span>Billing <NewBadge tone="neutral" text="Soon"/></span> </div> <div.demo-row style="gap: 20px"> <span id="new-badge-demo-future">Launching next year <NewBadge until="2099-01-01"/></span> <span id="new-badge-demo-past">Was new in 2024 <NewBadge until="2024-12-31"/></span> <span id="new-badge-demo-later">Not until 2099 <NewBadge from="2099-01-01"/></span> </div> <p.demo-note>The last two render nothing: one is past its date, one is before its date.</p> </div>Source
ui/new_badge.qwe
// NewBadge: a small "New" (or "Beta", "Updated") label beside a menu item, a// setting or a feature, that stops showing after a date, so nobody has to come// back and take it out.//// <a href="/reports">Reports <NewBadge until="2026-12-31"/></a>// <NewBadge text="Beta" tone="info"/>// <NewBadge text="Updated" until="2026-11-15" variant="outline" size="sm"/>//// text: what it says ("New"). until: a date ("2026-12-31"); after it, nothing// is rendered. from: a date before which nothing is rendered either, for// something launching. tone: "accent" (default), "success", "info", "warning",// "danger" or "neutral". variant: "solid" (default), "soft" or "outline".// size: "sm" or "md" (default). label: for screen readers, what is new// ("Reports"), read as "New: Reports"; without one it is read as it is.// Today is in UTC; a day either way is fine for a badge.import ui/theme.qwe use ui_clslet new_badge_css = css`.ui-newb { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; vertical-align: middle; font: 700 10.5px/1 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; --t: var(--ui-accent); --tf: var(--ui-accent-fg); --ts: var(--ui-accent-soft); }.ui-newb-success { --t: var(--ui-success); --tf: #fff; --ts: var(--ui-success-soft); }.ui-newb-info { --t: var(--ui-info); --tf: #fff; --ts: var(--ui-info-soft); }.ui-newb-warning { --t: var(--ui-warning); --tf: #fff; --ts: var(--ui-warning-soft); }.ui-newb-danger { --t: var(--ui-danger); --tf: #fff; --ts: var(--ui-danger-soft); }.ui-newb-neutral { --t: var(--ui-muted); --tf: var(--ui-bg); --ts: var(--ui-subtle); }.ui-newb-solid { background: var(--t); color: var(--tf); }.ui-newb-soft { background: var(--ts); color: var(--t); }.ui-newb-outline { border-color: color-mix(in srgb, var(--t) 55%, var(--ui-border)); color: var(--t); }.ui-newb-sm { height: 15px; padding: 0 4px; font-size: 9px; }`view NewBadge(text: str = "New", until: str? = null, from: str? = null, tone: str = "accent", variant: str = "solid", size: str = "md", label: str? = null, id: str? = null, class: str? = null) { style global new_badge_css let today = date.today() let live = (until == null || today <= until) && (from == null || today >= from) live && <span class={ui_cls(["ui-newb", `ui-newb-${tone}`, `ui-newb-${variant}`, size != "md" && `ui-newb-${size}`, class])} id={id}> {label != null ? [<span aria-hidden="true">{text}</span>, <span.ui-sr>{text}: {label}</span>] : text} </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 downloadsBadgeA small pill for a status or a count: six tones, soft, solid or outline, a status dot, and 99+.8 views · 6 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 downloads
Thread
Thread 0 posts
On NewBadge: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.