La librería de componentes que unifica la identidad visual de Brasilia.

Envuelve p-button + BrasiliaPreset tras una API de variant, en vez de combinar severity/outlined/text a mano.

El icono crece con el botón. El lienzo va a 12, 14 y 16 según size, y iconPos decide el lado. El trazo se dibuja a 1,5 en los tres tamaños: el catálogo vive en una rejilla de 24, así que sin corregirlo el trazo se encogería con el lienzo —0,75 en el botón pequeño, la mitad de lo que pide el diseño— y el icono se vería desvaído al lado del texto.

Uso

<!-- variantes, icono del catálogo, estados -->
<bui-button label="Guardar" variant="primary" />
<bui-button label="Cancelar" variant="secondary" />
<bui-button label="Eliminar" variant="danger" [loading]="saving()" />
<bui-button label="Nueva solicitud" icon="plus" />

Inputs principales

Campo completo: label + input + error/ayuda, con los id de accesibilidad enlazados. Implementa ControlValueAccessor, así que funciona con formControlName.

Uso

<bui-input
  label="Email"
  type="email"
  formControlName="requesterEmail"
  [error]="errorFor('requesterEmail')"
  required />

Inputs principales

Sobre p-select / p-multiSelect. Las variantes se controlan por input(): básico, filtrable, panel de tabla y multiselección. ControlValueAccessor + proyección de plantillas para filas a medida.

En móvil el panel se convierte solo en hoja inferior. Por debajo de 768px (BREAKPOINT.md) deja de colgar del disparador y sube desde el borde de abajo como modal a pantalla casi completa, con velo, encabezado y botón de cerrar; en multiselección añade un pie con «Aplicar». No hay nada que activar: es el comportamiento por defecto desde la v0.8.0.

La fila de persona la dibuja el kit. Con optionCaption el nombre gana una segunda línea pequeña debajo, showOptionAvatar le antepone el avatar de iniciales y optionStatus/optionStatusTone le cuelgan la píldora de estado a la derecha. Las tres piezas son independientes: la píldora es opcional y sin ella la fila se dibuja igual. Es el selector de conductor del diseño sin proyectar ninguna plantilla — #item queda para lo que el kit no cubre.

En multiselección, «Seleccionar todos» es una fila más. Va justo debajo del buscador, con su casilla a 16 y su rótulo a 48 como las opciones, y una línea que la separa de la lista; el toque lo atiende la fila entera, no solo la casilla. Abajo, el pie fijo con «Aplicar» —el botón grande del kit, con la flecha delante—, porque marcar casillas no cierra la hoja.

Con columnas, la hoja no cambia de ritmo. Cuando el panel declara headerLabel/metaLabel, la hoja mantiene la manija, la cabecera de 48 y el buscador sangrado a 16; lo que cambia es de ahí para abajo: una fila de rótulos de columna abre la lista y las filas suben de 44 a 52, que es el aire que el diseño le da a la tabla.

Con buscador, el panel abre con el cursor puesto en él. Desde la v0.10.1 no hace falta un clic más para escribir, ni en el panel de escritorio ni en la hoja de móvil, y el teclado sigue mandando en la lista: flechas para recorrerla, Enter para elegir y Escape para cerrar sin salir del buscador.

Buscar y paginar contra el servicio, desde la v0.14.0. Para los catálogos que no caben en el navegador —miles de filas detrás de un servicio paginado—, serverFilter apaga el acotado del panel: el buscador pasa a ser un aviso (searchChange) y la lista la manda el servicio. Filtrar además en local escondería resultados buenos, porque el servicio busca por unos campos y filterBy por otros. serverPaging avisa por loadMore cuando la lista se acaba —al llegar al final con el scroll, y también cuando la página que llegó no llena el panel— y el consumidor añade la siguiente a options; mientras la lista no crezca no se vuelve a pedir, así que no hay que avisar de que el catálogo se agotó. El rebote y el número de página se quedan en el consumidor, que es quien conoce la red: la historia «Búsqueda en servidor» de Storybook trae el patrón entero. Funciona igual en selección simple y en múltiple, y lo elegido no se pierde de vista aunque el servicio deje de traerlo en la página siguiente.

El calendario, en cambio, se abre centrado. Desde la v0.10.0 bui-datepicker ya no usa la hoja inferior: en móvil se abre como tarjeta centrada con velo, y se cierra al elegir el día o tocando fuera. Una hoja es el patrón de una lista larga que se desplaza; un calendario mide lo que mide, y a pantalla completa se le deformaban las celdas —el día elegido salía ovalado— y se le descolocaban las vistas de Mes y Año. Desde la v0.10.1 la tarjeta es la del marco de Figma pieza a pieza, y mide siempre lo mismo: no salta al cambiar de mes ni al pasar a las vistas de Mes y Año, y un mes de cinco semanas reparte el hueco entre las filas en vez de dejarlo debajo de la última.

Uso

<!-- panel de tabla: basta con optionMeta + rótulos -->
<bui-select
  [options]="vehiculos()"
  optionLabel="placa" optionMeta="numeroBus"
  headerLabel="Placa" metaLabel="Bus"
  [filter]="true" formControlName="placa" />

Capacidades

Campo completo: label + calendario + error/ayuda, sobre p-datepicker con el español ya puesto (meses y días, «Hoy», semana desde el lunes). Implementa ControlValueAccessor. En móvil el calendario se abre como tarjeta centrada — ver <bui-select>.

Rango: dos campos que se dibujan igual. No hay modo rango ni valor doble; siguen siendo dos campos de fecha suelta, cada uno con el suyo. Lo que los une es que a los dos se les pasa el mismo par rangeStart/rangeEnd: con eso, el calendario marca los dos extremos y pinta el carril entre ellos. Con un solo extremo puesto —el caso de abrir «Fin» cuando solo hay inicio— ese día ya sale marcado y el calendario abre en su mes.

rangeStart/rangeEnd solo dibujan: no eligen ni limitan nada. Impedir un fin anterior al inicio se sigue haciendo con minDate, que es quien decide sobre la validez del dato.

Uso

<!-- rango: el mismo par a los dos campos -->
<bui-datepicker
  label="Inicio" formControlName="inicio"
  [rangeStart]="inicio()" [rangeEnd]="fin()" />
<bui-datepicker
  label="Fin" formControlName="fin" [minDate]="inicio()"
  [rangeStart]="inicio()" [rangeEnd]="fin()" />

Capacidades

Píldora de estado con 5 tonos semánticos (neutro, info, éxito, aviso, peligro). Cada proyecto la envuelve para mapear sus propios estados de dominio al tono correcto, sin duplicar el estilo.

Uso

<bui-status-pill label="Aprobado" tone="success" />
<bui-status-pill label="Pendiente" tone="warning" />

Renderiza inline un SVG del catálogo por su name. Hereda el color del texto (currentColor) y admite tamaños sm/md/lg o un valor CSS.

<bui-icon name="bus" size="lg" />

// icono propio de un proyecto, sin tocar la librería
iconRegistry.register('mi-icono', '<svg>…</svg>');

Fija por defecto lo que el design system da por supuesto y que en cada proyecto se repetía a mano: modal, no arrastrable, no redimensionable, cierre por Escape y por clic en el velo, y montado en el body. Un diálogo del kit no debería poder salir arrastrable por olvido.

El contenido va por proyección, no por plantillas de PrimeNG. Si no proyectas nada en [dialog-footer], la banda del pie no se dibuja.

Cabecera propia, desde la v0.11.0. header cubre el caso corriente —un título y la ×—, pero hay diálogos cuya cabecera es más que una línea de texto: una insignia, un subtítulo, un estado. Para esos, [dialog-header] recibe el bloque entero y lo coloca en la banda de cabecera, donde la × sigue siendo la del catálogo. Es una alternativa a header, no un añadido. Existe porque los proyectos consumidores estaban apagando showHeader y volviendo a p-dialog a pelo, y con ello renunciaban al resto: ancho, velo, Escape y foco atrapado.

Sin banda de cabecera, desde la v0.12.0. [showHeader]="false" apaga la banda entera, para el diálogo que sencillamente no tiene cabecera: un aviso donde la insignia, el titular y el texto van compuestos como un bloque. No es la vía por defecto —con cabecera, header o [dialog-header] son mejores porque conservan la × del kit—, pero sin ella la única salida era volver a p-dialog a pelo y perder el velo, el Escape, el ancho del sistema y el foco atrapado.

Uso

<bui-dialog [(visible)]="abierto" header="Confirmar asignación">
  <p>¿Seguro que quieres asignar este conductor?</p>

  <div dialog-footer>
    <bui-button variant="secondary" label="Cancelar" (onClick)="abierto.set(false)" />
    <bui-button label="Confirmar" (onClick)="confirmar()" />
  </div>
</bui-dialog>

<!-- bloqueante: sin ×, sin Escape y sin cierre por velo -->
<bui-dialog [(visible)]="abierto" header="Eliminar registro" blocking />

<!-- cabecera propia: la × la sigue poniendo el kit -->
<bui-dialog [(visible)]="abierto" width="520px">
  <header dialog-header>
    <bui-icon name="building" />
    <h2>Nuevo centro de operaciones</h2>
    <p>Agrupa agencias bajo un mismo centro</p>
  </header>
</bui-dialog>

Se monta una sola vez en la raíz de la aplicación; los avisos se lanzan desde BuiToastService, que habla de tonos y no de las severidades de PrimeNG. El servicio sube al kit porque cada proyecto acababa escribiendo el mismo envoltorio.

El tono no tiñe el fondo: la superficie es siempre blanca y el color lo aporta solo el icono. Es lo correcto para algo que cae sobre contenido cualquiera — un fondo teñido a pantalla completa compite con lo que hay debajo.

Uso

// una vez, en el arranque
bootstrapApplication(App, { providers: [provideBuiToast()] });

<!-- una vez, en la raíz -->
<bui-toast position="top-right" />

// desde cualquier componente
private readonly toast = inject(BuiToastService);

this.toast.success('Asignación guardada');
this.toast.danger('No se pudo guardar', 'Revisa la conexión');

Son cuatro tonos, no los cinco del sistema: neutral significa «sin estado» y no tiene lectura posible en un aviso.

Es la directiva pTooltip de PrimeNG compuesta como host directive: el comportamiento (posicionamiento, retardos, cierre con Escape, accesibilidad) es el de PrimeNG, ya probado, y el kit solo aporta el nombre y la piel. Se expone con nombre propio por lo mismo que el resto: un proyecto consumidor no debería tener que importar de primeng/* para usar el kit.

Uso

<bui-icon name="pencil" buiTooltip="Editar" tooltipPosition="top" />

<!-- dentro de una tabla o un panel con overflow -->
<button buiTooltip="Ver historial" appendTo="body">…</button>

Los tres cumplen el mismo contrato que bui-input (label, required, hint, error, disabled, uiDisabled…), fijado en un spec compartido desde el primer día — que es justo lo que no se hizo con input, select y datepicker y por lo que acabaron derivando.

Cuándo cada uno: el interruptor aplica el cambio al instante («Notificaciones activas»); la casilla marca una intención que se confirma al enviar el formulario. Si hay un botón Guardar de por medio, es casilla. El radio no tiene sentido suelto: todas las opciones del grupo comparten name y el mismo formControlName.

Uso

<bui-switch formControlName="notificaciones" label="Notificaciones por correo" />

<!-- el intermedio es «seleccionar todo» con solo algunos hijos marcados -->
<bui-checkbox label="Todas las agencias" [indeterminate]="algunas()" />

<bui-radio formControlName="turno" name="turno" value="dia" label="Diurno" />
<bui-radio formControlName="turno" name="turno" value="noche" label="Nocturno" />

<!-- `contained`: el control en una superficie propia, para listas de ajustes -->
<bui-switch contained label="Alertas de relevo" />

bui-textarea es bui-input con altura: mismo label, mismo asterisco de requerido, mismo bloque de error/ayuda y el mismo contrato, así que un formulario mezcla los dos sin cambiar de vocabulario.

bui-search-input no es un componente de raíz: es la composición de bui-input + prefijo de lupa + botón de limpiar. Existe como pieza propia porque esa composición se repetía en cada pantalla con buscador, cada una con un icono y un aria-label distintos. Queda fuera del contrato de campos: filtra una lista, no aporta un valor a un formulario.

Uso

<bui-textarea formControlName="observaciones" label="Observaciones"
  [rows]="3" hint="Máximo 240 caracteres." [maxlength]="240" />

<bui-search-input placeholder="Buscar agencia" (searchChange)="filtrar($event)" />

Control segmentado: un carril redondeado con las opciones dentro y la activa rellena en el azul de marca. No envuelve p-tabs: las pestañas de PrimeNG son de subrayado y traen la gestión de paneles; reproducir el diseño encima habría sido anular su chrome entero para volver a dibujarlo, heredando además un modelo de paneles que aquí no se quiere — la barra solo cambia un valor y el contenido lo pone quien la usa.

La accesibilidad sí es la del patrón de pestañas: role="tablist", aria-selected, una única parada de tabulación y navegación con flechas, Inicio y Fin.

Ancho. El carril se ciñe a las pestañas que hay: con dos opciones no sobra fondo a la derecha, ni siquiera dentro de una columna flex. fullWidth invierte eso cuando se quiere a propósito —la barra ocupa el contenedor y las pestañas se reparten el ancho a partes iguales, que es el control segmentado de cabecera de formulario—, y scrollable saca dos flechados para recorrer una lista que no cabe. Los flechados solo aparecen si hacen falta y se apagan en cada extremo; no entran en la tabulación, porque el teclado ya recorre la barra con las flechas y el foco arrastra la pestaña a la vista.

Uso

<bui-tabs [tabs]="pestanas" [(active)]="seleccionada" ariaLabel="Tipo de cambio" />

<!-- control segmentado que encabeza un formulario: dos opciones a mitad y mitad -->
<bui-tabs fullWidth [tabs]="acceso" [(active)]="modo" ariaLabel="Acceso" />

<!-- lista larga: flechados de anterior y siguiente -->
<bui-tabs scrollable [tabs]="muchas" [(active)]="seleccionada" ariaLabel="Sección" />

// cada pestaña admite contador o icono
pestanas: BuiTab[] = [
  { value: 'viaje', label: 'Cambio de viaje', badge: 3 },
  { value: 'pasajero', label: 'Cambio de pasajero' },
  { value: 'abierto', label: 'Viaje abierto', disabled: true },
];

Cinco piezas pequeñas sin PrimeNG detrás, solo CSS sobre tokens. Existen porque estaban definidas a mano decenas de veces por proyecto, cada una con su propio gris.

bui-empty-state con tone, desde la v0.11.0. Sin tono, el disco se queda en el azul de marca: es lo correcto para un vacío normal, donde no ha pasado nada malo. Con tone="danger" cambia de familia, para que la lista que no cargó no se lea igual que la que todavía no tiene nada — si se ven iguales, el usuario no sabe si volver a intentarlo. Admite los cinco tonos del sistema y el glifo usa el rol dot, el mismo que el punto de la píldora.

bui-avatar con size, desde la v0.13.0. Antes medía 32px fijos y no había forma de cambiarlo, lo que lo dejaba inservible para casi cualquier pantalla real: en un proyecto consumidor había ocho medidas distintas entre 22 y 46px y solo dos coincidían. Acepta sm/md/lg (24/32/40) o un valor CSS suelto, igual que bui-icon; md es lo que medía antes, así que quien no lo pase no ve ningún cambio. La letra sale de la caja —la mitad de su lado—, porque a 24px las dos iniciales no caben con los 16 fijos de antes. fontSize permite fijarla, pero es un andamio para adoptar el componente sin salto visual, no una opción de diseño: la proporción letra/caja es del sistema. Si hace falta en una pantalla nueva, lo que está mal es esa pantalla.

bui-chip frente a bui-status-pill: la diferencia no es el aspecto, es si se puede pulsar. El chip es un filtro — se renderiza como <button> con aria-pressed, así que trae teclado y anillo de foco. La píldora es presentación pura, para un estado que solo se lee.

Uso

<bui-chip label="Disponibles" [active]="filtro() === 'disponibles'" (toggle)="filtrar('disponibles')" />

<!-- la caja del contador crece con la cifra: 3, 12, 99+ -->
<bui-badge [value]="sinLeer()" [max]="99" />

<!-- deriva las iniciales del nombre, ignorando partículas (de, del, la) -->
<bui-avatar name="María del Carmen Rodríguez" />
<bui-avatar name="María del Carmen Rodríguez" size="lg" />

<bui-divider />

<bui-empty-state icon="inbox" title="Sin resultados"
  description="No se encontraron elementos con los filtros actuales.">
  <bui-button empty-action label="Limpiar filtros" (onClick)="limpiar()" />
</bui-empty-state>

<!-- el hueco que NO se esperaba: la carga que falló -->
<bui-empty-state tone="danger" icon="alert" title="No se pudo cargar la lista"
  description="Ocurrió un error al consultar el servidor.">
  <bui-button empty-action label="Reintentar" (onClick)="reintentar()" />
</bui-empty-state>