Chip link
A chip that is a link — a filter that is an address — with the look of Chip, the current one marked, and chipVariants to style anything else; server-safe.
Web uniquement — React, depuis @krizaka/ui/chip-link. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Filters that change the address (
/explore?tag=night): each tag is a link, shareable and server-rendered.
Quand ne pas l’utiliser
Installation
Installer
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { ChipLink, chipVariants } from "@krizaka/ui/chip-link";Exemples
Filters that are links
Tags as links, the current one marked — rendered on the server.
Props
A filter that is a link, with the look of Chip.
| Prop | Type | Défaut | Description |
|---|---|---|---|
asChild | boolean | — | Renders your router's <Link> with the chip's look. |
current | "true" | "page" | page | What aria-current says when selected: page (a filter that is a page) or true. |
selected | boolean | false | The current filter: the accent, aria-current (page by default) and data-state="on". |
size | "sm" | "md" | md | sm · md. |
Accessibilité
- Real links: the role, the focus and the keyboard come from the platform.
- The current filter carries
aria-current, not only a colour.
Clavier
| Touches | Action |
|---|---|
| Enter | Follows the link. |
Bonnes pratiques
- Mark the current filter with
selected:aria-current="page"says it, the accent shows it. - Wrap the links in a
navnamed for what they filter. - Use
asChildwith your router's link;chipVariants({ selected })for anything else.
Composants liés
Générée depuis le code de @krizaka/ui 2.3.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub