Result

Muestra páginas de resultado para estados de éxito, error o informativos.

Importar

import { Result } from 'asterui'

Ejemplos

Resultado de éxito

Muestra estado de éxito con botones de acción.

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 error

Muestra estado de error con acción de reintentar.

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

Muestra mensaje informativo.

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 advertencia

Muestra estado de advertencia.

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 no encontrada

Muestra página de error 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 Prohibido

Muestra página de acceso denegado.

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 Error del servidor

Muestra página de error del 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`

Propiedad	Descripción	Tipo	Predeterminado
`status`	Tipo de estado del resultado	`'success' \| 'error' \| 'info' \| 'warning' \| '404' \| '403' \| '500'`	`'info'`
`title`	Título del resultado	`React.ReactNode`	-
`subTitle`	Subtítulo del resultado	`React.ReactNode`	-
`icon`	Icono personalizado (anula el icono de estado predeterminado)	`React.ReactNode`	-
`extra`	Elementos de acción adicionales (típicamente botones)	`React.ReactNode`	-
`children`	Contenido adicional entre subtítulo y acciones	`React.ReactNode`	-
`className`	Clases CSS adicionales	`string`	-
`style`	Estilos en línea	`React.CSSProperties`	-
`data-testid`	ID de prueba para pruebas	`string`	-

Accesibilidad

Los iconos de estado tienen etiquetas ARIA apropiadas
Estructura de encabezado semántico para título y subtítulo
Los botones de acción son accesibles por teclado
El color no es el único indicador de estado