Result

Exibe páginas de resultado para estados de sucesso, erro ou informativos.

Importação

import { Result } from 'asterui'

Exemplos

Resultado de Sucesso

Mostra estado de sucesso com botões de ação.

Payment Successful

Your order has been confirmed and will be shipped within 2 business days.

import { Result, Button, Space } from 'asterui'

function App() {
  return (
      <Result
        status="success"
        title="Payment Successful"
        subTitle="Your order has been confirmed and will be shipped within 2 business days."
        extra={
          <Space>
            <Button color="primary">View Order</Button>
            <Button>Continue Shopping</Button>
          </Space>
        }
      />
    )
}

export default App

Resultado de Erro

Mostra estado de erro com ação de tentar novamente.

Submission Failed

Please check your information and try again.

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="error"
        title="Submission Failed"
        subTitle="Please check your information and try again."
        extra={<Button color="error">Try Again</Button>}
      />
    )
}

export default App

Resultado Informativo

Mostra mensagem informativa.

Verification Required

Please check your email to verify your account.

import { Result } from 'asterui'

function App() {
  return (
      <Result
        status="info"
        title="Verification Required"
        subTitle="Please check your email to verify your account."
      />
    )
}

export default App

Resultado de Aviso

Mostra estado de aviso.

Account Suspended

Your account has been suspended due to unusual activity.

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="warning"
        title="Account Suspended"
        subTitle="Your account has been suspended due to unusual activity."
        extra={<Button color="warning">Contact Support</Button>}
      />
    )
}

export default App

404 Página Não Encontrada

Mostra página de erro 404.

404

Page Not Found

The page you are looking for does not exist.

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="404"
        title="Page Not Found"
        subTitle="The page you are looking for does not exist."
        extra={<Button color="primary">Back Home</Button>}
      />
    )
}

export default App

403 Proibido

Mostra página de acesso negado.

403

Access Denied

You don't have permission to access this resource.

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="403"
        title="Access Denied"
        subTitle="You don't have permission to access this resource."
        extra={<Button>Request Access</Button>}
      />
    )
}

export default App

500 Erro do Servidor

Mostra página de erro do servidor.

500

Server Error

Something went wrong on our end. Please try again later.

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="500"
        title="Server Error"
        subTitle="Something went wrong on our end. Please try again later."
        extra={<Button color="primary">Refresh Page</Button>}
      />
    )
}

export default App

API

`Result`

Propriedade	Descrição	Tipo	Padrão
`status`	Tipo de status do resultado	`'success' \| 'error' \| 'info' \| 'warning' \| '404' \| '403' \| '500'`	`'info'`
`title`	Título do resultado	`React.ReactNode`	-
`subTitle`	Subtítulo do resultado	`React.ReactNode`	-
`icon`	Ícone customizado (substitui ícone de status padrão)	`React.ReactNode`	-
`extra`	Elementos de ação adicionais (tipicamente botões)	`React.ReactNode`	-
`children`	Conteúdo adicional entre subtítulo e ações	`React.ReactNode`	-
`className`	Classes CSS adicionais	`string`	-
`style`	Estilos inline	`React.CSSProperties`	-
`data-testid`	ID de teste para testes	`string`	-

Acessibilidade

Ícones de status têm rótulos ARIA apropriados
Estrutura de cabeçalho semântico para título e subtítulo
Botões de ação são acessíveis por teclado
Cor não é o único indicador de status