Bubble

La superficie del mensaje en interfaces de chat, con variantes y reacciones.

Hey, did you ship the new docs page?

The nav check is failing on my branch.

Just pushed the fix, pull and rerun it.

1import { Bubble } from '@/components/ui/bubble';
2
3export function Default() {
4  return (
5    <div className="flex w-full max-w-sm flex-col gap-3">
6      <Bubble.Group align="start">
7        <Bubble variant="secondary">
8          <Bubble.Content>Hey, did you ship the new docs page?</Bubble.Content>
9        </Bubble>
10        <Bubble variant="secondary">
11          <Bubble.Content>The nav check is failing on my branch.</Bubble.Content>
12        </Bubble>
13      </Bubble.Group>
14      <Bubble.Group align="end">
15        <Bubble align="end">
16          <Bubble.Content>Just pushed the fix, pull and rerun it.</Bubble.Content>
17          <Bubble.Reactions side="bottom" align="start">
18            <span aria-hidden="true">👍</span>
19            <span className="text-muted-foreground px-0.5">2</span>
20          </Bubble.Reactions>
21        </Bubble>
22      </Bubble.Group>
23    </div>
24  );
25}

Instalación

pnpm dlx nachui add bubble

Anatomía

1import { Bubble } from '@/components/ui/bubble';

1<Bubble variant="secondary" align="start">
2  <Bubble.Content>Hola, ¿cómo va el release?</Bubble.Content>
3  <Bubble.Reactions>
4    <span>👍</span>
5  </Bubble.Reactions>
6</Bubble>

Bubble se limita a la superficie del mensaje. El nombre del remitente, la hora, los avatares y las acciones pertenecen a Message, que compone burbujas en una fila de conversación completa.

Composición

Usa la siguiente composición para construir un Bubble:

Bubble.Group
└── Bubble
    ├── Bubble.Content
    └── Bubble.Reactions

Variantes

Siete variantes cubren ambos lados de una conversación y los estados alrededor: default para el usuario actual, secondary y muted para el otro lado, tinted para un lavado sutil del color primario, outline y ghost para contenido discreto, y destructive para errores.

Default, for the current user.

Secondary, for the other side.

Muted, for supporting content.

Tinted, a subtle primary wash.

Outline, framed but quiet.

Ghost, no frame at all.

Destructive, something went wrong.

1import { Bubble } from '@/components/ui/bubble';
2
3const VARIANTS = [
4  { variant: 'default', text: 'Default, for the current user.' },
5  { variant: 'secondary', text: 'Secondary, for the other side.' },
6  { variant: 'muted', text: 'Muted, for supporting content.' },
7  { variant: 'tinted', text: 'Tinted, a subtle primary wash.' },
8  { variant: 'outline', text: 'Outline, framed but quiet.' },
9  { variant: 'ghost', text: 'Ghost, no frame at all.' },
10  { variant: 'destructive', text: 'Destructive, something went wrong.' },
11] as const;
12
13export function Variants() {
14  return (
15    <div className="flex w-full max-w-sm flex-col gap-2">
16      {VARIANTS.map(({ variant, text }) => (
17        <Bubble key={variant} variant={variant}>
18          <Bubble.Content>{text}</Bubble.Content>
19        </Bubble>
20      ))}
21    </div>
22  );
23}

Referencia de API

Bubble

Prop	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'muted' \| 'tinted' \| 'outline' \| 'ghost' \| 'destructive'`	`'default'`	Tratamiento visual de la superficie
`align`	`'start' \| 'end'`	`'start'`	Lado al que se pega la burbuja
`className`	`string`	-	Clases CSS adicionales

Bubble.Content

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Fusiona los estilos en el hijo, por ejemplo un enlace
`className`	`string`	-	Clases CSS adicionales

Bubble.Reactions

Prop	Type	Default	Description
`side`	`'top' \| 'bottom'`	`'bottom'`	Borde que superpone la píldora
`align`	`'start' \| 'end'`	`'end'`	Anclaje horizontal en ese borde
`className`	`string`	-	Clases CSS adicionales

Bubble.Group

Prop	Type	Default	Description
`align`	`'start' \| 'end'`	`'start'`	Alineación de las burbujas apiladas
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorBreadcrumb

SiguienteButton