EchoSistema Template
Showcase index

Actions

Forms

Feedback

Content

Feedback

Alerts in eight tones, native modals and the two ways of saying something is on its way.

Alerts

Notices in eight tones, the same palette as the intents: the four semantic status ones and the four named tonal ones.

InformationA neutral notice, for context or news that asks for no action.
SuccessThe operation finished as expected; nothing left to do.
WarningSomething needs your review before you continue.
ErrorThe operation failed; check the data and try again.
CautionThe attention yellow, one step below orange: read before moving on.
Steel blueThe MIV's steel blue as a named tone, for an institutional note without urgency.
Navy blueThe group's deep field as a notice; the accent lightens in the dark theme so it does not vanish.
DarkThe dark neutral, for the notice that asks for no color at all.

Modals

The native dialog on an opaque theme surface: trapped focus, Esc closes, the page behind locks and the background blurs into illegibility so the modal is the only focus; clicking outside does not close. The modal takes the same intents as the buttons: the edge wedge, like the alerts, and the primary action follow the tone.

.es-dialog

.es-dialog--sm … .es-dialog--xxl

.es-dialog + .es-i--*

Account modals

Sign in, create account, recover and change the password, and the locked session: five ready compositions over the same echo-modal. None of them talks to the network — each emits submit with the data and expects the pending and error props from the caller.

<auth-login-modal> · <auth-register-modal> · <auth-forgot-password-modal>

The three talk to each other: the links inside each one switch modals without closing the flow.

<auth-update-password-modal> · <auth-lock-modal>

The lock has no close button and refuses Escape; in this sample, any 8-character password unlocks it.

Blocking and skeletons

The two ways of saying something is on its way: the veil covering a ready region and the smear standing in for what has not arrived.

<echo-block>

Click the button to see the region covered. While the veil is up the content is inert: Tab does not enter it.

.es-skeleton

Toasts

The notice that floats over the page, queued by a global composable. The announcement region stays mounted even when empty: one that only appears with the message often goes unread.

useToast().push()

position + align

·

The position lives in global state, so anywhere in the app can ask where the notice shows up.

timeout: 0

With a zero timeout the notice stays until someone closes it; the default fades after 4.5 seconds.

Spinners

Always aria-hidden: what announces loading is the region aria-busy, and a spinner announced on its own does not say what is happening.

.es-spinner

.es-spinner + .es-i--*

About this modal

The structure follows the instruction: a header with the title and a close button, a body that scrolls when it needs to and a footer with the primary action on the right.

Long content

The paragraphs below repeat on purpose: the body scrolls inside the dialog, header and footer stay fixed and the page behind does not move.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

Width scale --md

This modal only swaps the size class; the paragraphs below repeat so the body scrolls internally at any width.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

The text runs in the dialog's body, never on the page: the header holds the title and the footer keeps the actions always in view.

Confirm the action

The wedge and the primary button inherit the chosen intent. In a truly destructive action the button verb is explicit, Delete rather than OK, and the intent is danger.

primary

Sign in

Use the email registered on the platform.

No account yet?

Create account

Takes a minute: name, email and a password.

Already have an account?

Recover your password

Enter the account email and we'll send a link for you to set a new password.

Change your password

Choose the new password for the account. The email link is what authorizes this change.

Session locked

Ada Lovelace

Enter the password to pick up where you left off.

EchoSistema Template

The visual foundation of the EchoSistema group's platform sites.

© 2026 EchoSistema S.A. · EchoSistema standard template