Components
Verified badge
A seal that says the person or the account was verified (a selfie, an ID) — the accent, named in words.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
Why it is here. Used by krizaka.com.
When to use
- Beside a name on a profile, a card, a message header.
- On a photo (
onMedia/on="media").
When not to use
- For a status that changes (online, live).Use instead: Badge
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { VerifiedBadge } from "@krizaka/ui/verified-badge";Examples
Verified
Beside a name, and with its words.
Elena Ruiz
Props
A seal that says the person or the account was verified (a selfie check, an ID), named in words.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | Its words (“Verified”), read — and shown with showLabel — passed translated. |
onMedia | boolean | — | On a photo: a ring of the media around the seal. |
showLabel | boolean | — | Show the words beside the seal. Default false: the seal alone, named. |
size | "sm" | "md" | "lg" | md | The seal's size: sm (14 px), md (16 px, default), lg (20 px). |
Accessibility
- An image named by
label; withshowLabelthe words are shown too.
Best practices
- Name what was verified (“Verified with a selfie”) when it matters.
- Show it only for a check the platform did, never self-declared.
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub