ComponentesComponents

Aviso (toast)Toast

Mensaje breve que se apila y se despliega al pasar el ratón.Short message that stacks and spreads on hover.

DiseñoDesign: coss ui (MIT) · toast.tsxMITambos · densidaddensity media · sobriaMarkdownJSON

CódigoCode

<div class="c-btn-row">
  <button class="c-btn c-btn--outline" type="button" data-c-toast="Cambios guardados" data-c-toast-desc="Tu perfil está al día." data-c-toast-type="success">Guardar</button>
  <button class="c-btn c-btn--outline" type="button" data-c-toast="Enlace copiado" data-c-toast-type="info">Copiar enlace</button>
  <button class="c-btn c-btn--outline" type="button" data-c-toast="No se pudo exportar" data-c-toast-desc="Prueba con un formato más pequeño." data-c-toast-type="error">Simular error</button>
</div>

<!-- Una vez por página, al final del <body>. Debe existir desde que carga. -->
<section aria-label="Notificaciones">
  <ol class="c-toast-viewport" data-position="bottom-right" role="status" aria-live="polite" aria-relevant="additions"></ol>
</section>

«Todo» trae tokens, dependencias y componente en un solo archivo, listo para abrir o dárselo a un agente.“All” bundles tokens, dependencies and the component in one file, ready to open or hand to an agent.

InstalaciónInstallation

  1. Agrega una vezAdd once tokens.css (colores, radios, tema oscuro).(colors, radii, dark theme).
  2. Agrega también:Also add: BotónButton.
  3. Copia los archivos:Copy the files: toast.html, toast.css, toast.js.
  4. Para el tema oscuro, pon la claseFor the dark theme, add the class dark ento <html>.

Cuándo usarloWhen to use it

ÚsaloUse it

  • Para confirmar algo que ya pasó.
  • To confirm something that already happened.

Mejor noAvoid

  • Para errores de formulario: ponlos junto al campo.
  • For form errors: place them next to the field.

AccesibilidadAccessibility

status
  • La región role=status existe desde que carga la página.
  • Máximo 3 a la vista, 5 s cada uno; se pausa con ratón, foco o pestaña oculta.
  • The role=status region exists from page load.
  • At most 3 visible, 5 s each; pauses on hover, focus or hidden tab.

Cómo probarloHow to test it

  • Lanza cuatro seguidos: quedan tres.
  • Fire four in a row: three remain.

CréditosCredits