Slot
Slot merges its props and classes into its only child — the engine of asChild — and VisuallyHidden names things for screen readers only.
Web only — React, from @krizaka/ui/slot. Stable: its API only changes in a major version.
When to use
- To give your own component an
asChildprop. VisuallyHiddenfor words that only assistive technology needs: an icon button's name, a table caption.
When not to use
- To style a link like a button:
asChildon the button does it.Use instead: Button - To hide something from everyone: use
hidden.
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 { Slot, VisuallyHidden } from "@krizaka/ui/slot";Examples
Slot
The link is rendered, styled by the Slot.
import { Slot, VisuallyHidden } from "@krizaka/ui/slot";
export default function SlotAsChild() {
// Slot merges its props and classes into its only child: the link is rendered, styled by the Slot.
return (
<Slot className="text-sm font-semibold text-fg underline underline-offset-4">
<a href="#docs">
Read the docs
<VisuallyHidden> about Slot</VisuallyHidden>
</a>
</Slot>
);
}VisuallyHidden
An icon button named for screen readers.
import { VisuallyHidden } from "@krizaka/ui/slot";
// A name for assistive technology only: the icon is seen, the words are read.
export default function SlotVisuallyHidden() {
return (
<button type="button" className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-border-default text-fg">
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
<path d="M18 6 6 18M6 6l12 12" />
</svg>
<VisuallyHidden>Close</VisuallyHidden>
</button>
);
}Props
This module has no component props: see the import and the preview above.
Accessibility
VisuallyHiddenis read by screen readers and not shown.Slotkeeps the child's element: a link stays a link, with its role and keyboard.
Best practices
Slottakes exactly one child element.- Prefer a visible label to
VisuallyHiddenwhen there is room for one.
Related components
Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub