averouiComponent playgroundv0.0.1
Components / Overlay /Dialog

Dialog

New

A focused space for the next step. Bring forms, details and useful actions into view.

Modal & non-modalResponsive sizingCustom templates

Basic

Control visibility with a two-way binding. Use a modal dialog when a task needs the user's full attention.

Alex Morgan

alex@example.com

DESIGN WORKSPACE

Edit profile

A few details to make this workspace yours.

Your workspace is up to date.

Template

Use header and footer templates to add identity and actions around your content.

Design workspace
A PLACE FOR GREAT IDEAS

Better work starts together.

Keep your sketches, notes and next steps in one thoughtful space.

12 projects4 collaborators
All changes saved

Position

Place dialogs in the center, along an edge or in a corner.

Right where you need it

Current position: center. Click outside or press Escape to close.

Maximizable

Give content more room with a full-screen view. Restore the original size with the same control.

Project brief

THE NEXT CHAPTER

Make space for what matters.

A simple, welcoming workspace that helps people turn a good idea into something real.

Our direction

Focus on clear decisions, useful defaults and the small details that make everyday work feel easier.

Long content

The content area scrolls within the available height, keeping the header and footer accessible.

A guide to thoughtful work

1. Start with a purpose

Great projects begin with a clear intention. Describe the problem, choose a meaningful outcome and give your team a shared point of reference.

Give this step enough time, write down what you learn and return to it as the project grows. The best process is one your team can understand and use.

2. Make room for exploration

Collect ideas before narrowing the direction. Sketch alternatives, ask questions and keep the early work lightweight so everyone can contribute.

Give this step enough time, write down what you learn and return to it as the project grows. The best process is one your team can understand and use.

3. Build a shared language

Use consistent names and reusable patterns. A shared vocabulary makes feedback easier to understand and decisions easier to remember.

Give this step enough time, write down what you learn and return to it as the project grows. The best process is one your team can understand and use.

4. Keep the work visible

Share progress while there is still time to change it. Small reviews help a team learn together and keep the project moving in a useful direction.

Give this step enough time, write down what you learn and return to it as the project grows. The best process is one your team can understand and use.

5. Care for the details

Review the experience on different screens and with a keyboard. Good defaults and clear labels make a product more comfortable for everyone.

Give this step enough time, write down what you learn and return to it as the project grows. The best process is one your team can understand and use.

6. Reflect and improve

After a milestone, look back at what worked. Keep the useful habits, simplify the difficult parts and choose one improvement for the next chapter.

Give this step enough time, write down what you learn and return to it as the project grows. The best process is one your team can understand and use.

Without modal

Keep the page available while a small companion window stays open. Try the page action while the notes window is visible.

Quick notes

Notes stay here when you close and reopen this window.

Headless

Replace the entire dialog with your own layout and use the supplied close callback.

YOUR NEXT CHAPTER

Good ideas start here.

Your workspace is ready. Bring your curiosity, make a little room and begin.

Usage and API

Import AvDialog and control its visible model. No service is required.

TypeScript
import { signal } from '@angular/core';
import { AvDialog, AvButton } from 'avero-ui';

// Add AvDialog and AvButton to your component imports.
readonly visible = signal(false);
HTML
<button avButton (click)="visible.set(true)"
  aria-controls="project-dialog" [attr.aria-expanded]="visible()">Open</button>
<av-dialog inputId="project-dialog" header="Project details"
  [(visible)]="visible" [modal]="true" [maximizable]="true"
  width="640px" [breakpoints]="{ '768px': '90vw' }">
  <p>Your content goes here.</p>
  <ng-template #footer let-close="close">
    <button avButton (click)="close()">Done</button>
  </ng-template>
</av-dialog>
Inputs and models. visible and maximized support two-way binding. Configure header, ariaLabel, inputId, modal (false by default), closable, closeOnEscape, dismissableMask, maximizable, position, width and breakpoints. Breakpoint keys are maximum viewport widths in px; the narrowest matching range wins.
Templates and events. Direct child #header, #footer and #headless templates customize the layout. Footer and headless templates receive close. onShow and onHide report visibility changes; onMaximize reports the new state. Content stays mounted when hidden, preserving form state.
Accessibility. Modal dialogs keep focus inside and make the page inert. Escape closes when enabled and focus returns to the opener. Non-modal dialogs leave the page interactive. Set header or ariaLabel to name a custom or headless dialog. Use autofocus or data-default-focus for the initial control, and aria-controls plus aria-expanded on your trigger.
Styling. Use width and breakpoints for responsive sizing. Customize --av-dialog-background, --av-dialog-color, --av-dialog-border, --av-dialog-radius, --av-dialog-padding and --av-dialog-mask.
Avero UI Designed to fit your application.