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 only — React, from @krizaka/ui/chip-link. Beta: its API may still change in a minor version.
When to use
- Filters that change the address (
/explore?tag=night): each tag is a link, shareable and server-rendered.
When not to use
Installation
Install
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { ChipLink, chipVariants } from "@krizaka/ui/chip-link";Examples
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 | Default | 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. |
Accessibility
- Real links: the role, the focus and the keyboard come from the platform.
- The current filter carries
aria-current, not only a colour.
Keyboard
| Keys | Action |
|---|---|
| Enter | Follows the link. |
Best practices
- 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.
Related components
Generated from the code of @krizaka/ui 2.3.0: its meta.ts, its examples and its types.Edit this documentation on GitHub