id *

string

• —

Identificador do dialog. O id é obrigatório para garantir acessibilidade. O componente Dialog criará um id para o title e atribuirá ao Dialog a aria-labelledby correspondente.

title *

string

• —

Título do dialog. O título aparece em negrito na parte superior da caixa de diálogo e usa algumas palavras para transmitir o resultado do que acontecerá se um usuário continuar com uma ação.

children *

ReactNode

• —

Conteúdo interno do dialog. Normalmente uma descrição que comunica resumidamente qualquer informação adicional ou contexto que um usuário precisa saber para tomar uma das decisões oferecidas pelas ações.

open

boolean

• false (default)

• true

Valor que define se o dialog é mostrado ou não.

alwaysRender

boolean

• false (default)

• true

Valor que define se o dialog é sempre renderizado no DOM ou não.

warning

boolean

• false (default)

• true

Valor que define se o dialog tem um ícone de aviso. Utilizado para dialogs de erro, que comunicam informações críticas sobre um problema que o usuário precisa reconhecer.

verticalActions

boolean

• false (default)

• true

Valor que define se o as ações serão mostradas sempre na vertical. Se definido como true, o Dialog terá uma maxWidth de 288px.

actions *

{ primary?: ButtonProps; secondary?: ButtonProps; tertiary?: ButtonProps; }

Um dialog pode conter até três ações, cada uma com pelo menos as propriedades { children: 'Content', onClick: () => foo() }. Deve conter pelo menos uma ação.

customProps

{ close?: ActionButtonProps; title?: TypographyProps }

close: Se for passado o close, renderiza o botão de fechar. Caso contrário, a pessoa não terá como dar dismiss no Dialog sem ser por meio de uma das ações disponibilizadas (botões de ação). Permite também que propriedades sejam passadas para o botão de fechar, como onClick, etc. Para renderizar, passe um close.title e também umaclose.aria-label para acessibilidade.

title: O Dialog já cria um id para o title e vincula a um aria-labelledby automaticamente. Caso deseje utilizar um id específico para o title, deve ser passado também um aria-labelledby para maior acessibilidade do Dialog.

dismissProps

DialogDismiss

• -

Define o comportamento para fechar o Dialog.

aria-describedby

string

• —

Utilize em conjunto com o id do elemento que encapsula a descrição do Dialog.

aria-labelledby

string

• —

O Dialog já cria um id para o title e vincula a um aria-labelledby automaticamente. Utilize somente se passar um id específico para o title através das customProps.

asPortal

boolean

• false

• true (default)

Define se o componente será criado com um Portal, fora do nó principal da aplicação e dentro do body

escapeKey

boolean

• false

• true (default)

Define se a tecla esc chama o método onDismiss.

outsidePressEvent

string

• pointerdown (default)

• mousedown

• click

Define qual evento é capturado ao clicar no backdrop para chamar o método onDismiss.

onDismiss

function

Função chamada quando o Dialog é fechado seja pelo clique no backdrop, no botão de fechar ou pela tecla ESC. É utilizada para garantir o comportamento adequado para a propriedade open.

event é o objeto de evento do click.