新着
バッジStatus Badge Set
Success, warning, danger and info badges - a coloured dot beside a word that carries the meaning on its own.
#badge#status#dot
5 個のフレームワーク初級
Loading…
An inline scalloped seal with a check, drawn in two SVG paths - no icon library.
<!--
The seal is aria-hidden and the word "Verified" sits beside it in plain
text - the blue tick means nothing to a screen reader and less than you
think to everyone else. Dark mode uses blue-500, not 400: the white check
needs 3:1 against its own fill, and blue-400 misses it.
-->
<span class="inline-flex items-center gap-1 text-sm font-medium text-gray-900 dark:text-gray-100">
<svg viewBox="0 0 24 24" class="h-4.5 w-4.5 shrink-0 text-blue-600 dark:text-blue-500" fill="currentColor" aria-hidden="true">
<path d="M12 1.5l2.09 2.02 2.83-.6 1.1 2.67 2.67 1.1-.6 2.83L22.5 12l-2.41 2.48.6 2.83-2.67 1.1-1.1 2.67-2.83-.6L12 22.5l-2.09-2.02-2.83.6-1.1-2.67-2.67-1.1.6-2.83L1.5 12l2.41-2.48-.6-2.83 2.67-1.1 1.1-2.67 2.83.6L12 1.5z" />
<path d="M8.6 12.3l2.2 2.2 4.6-4.9" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Verified
</span>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label | string | 'Verified' | 読み込み中に読み上げられるアクセシブルなラベル。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The seal is two paths in one 24×24 SVG: the scalloped rosette filled with `currentColor` and the check stroked in white on top, so recolouring is one text-colour class. Dark mode deliberately uses `blue-500` rather than the usual 400 lift: the white check needs 3:1 against its own fill (WCAG graphics contrast), and blue-400 misses it. The SVG is `aria-hidden` and the word "Verified" sits beside it in real text - the blue tick means nothing to a screen reader, and platform lore aside, less than you think to everyone else. If you must render the seal alone, give the wrapping span an `aria-label` and a tooltip; better, keep the word.