Slot

Slot merges its props and classes into its only child — the engine of asChild — and VisuallyHidden names things for screen readers only.

WebStableUtilities & brand

Web only — React, from @krizaka/ui/slot. Stable: its API only changes in a major version.

Why it is here. The `asChild` mechanism: every primitive that renders your own link or element is built on it.

When to use

To give your own component an asChild prop.
VisuallyHidden for words that only assistive technology needs: an icon button's name, a table caption.

To style a link like a button: asChild on the button does it.Use instead: Button
To hide something from everyone: use hidden.

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Slot, VisuallyHidden } from "@krizaka/ui/slot";

The link is rendered, styled by the Slot.

An icon button named for screen readers.

This module has no component props: see the import and the preview above.

VisuallyHidden is read by screen readers and not shown.
Slot keeps the child's element: a link stays a link, with its role and keyboard.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub