Toolbar
Contenedor horizontal para grupos de acciones relacionadas, con variantes flat/card y dos densidades.
Instalación#
bash
pnpm add @tsukira/uiUso#
tsx
import { Toolbar } from "@tsukira/ui"; <Toolbar variant="card"> <Button size="sm" variant="brand">Guardar</Button> <Button size="sm" variant="ghost">Descartar</Button></Toolbar>Ejemplos#
Variante card
Variante flat · densidad compacta
API#
ToolbarPropsextends HTMLAttributes<HTMLDivElement>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
variant | 'flat' | 'card' | — | Variante visual: `flat` (sin borde) o `card` (con borde + sombra). |
density | 'compact' | 'comfortable' | — | Densidad del padding interno. |
wrap | boolean | — | Si true, se ajusta a varias filas cuando no cabe. |
ToolbarTitlePropsextends HTMLAttributes<HTMLElement>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
as | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'div' | `h3` | Heading tag — default `h3`. |
ToolbarTitleBlockPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
title* | ReactNode | — | — |
description | ReactNode | — | — |
titleAs | ToolbarTitleProps['as'] | — | — |