ErrorState

---
import {
  Button,
  ButtonLink,
  ErrorState
} from '@santi020k/lumen-astro'
---

<ErrorState
  description="Check your connection and try again. Your existing projects are unchanged."
  id="projects-error"
  reference="REQ-4F82"
  title="Could not load projects"
>
  <Button slot="actions" size="sm">Try again</Button>
  <ButtonLink slot="actions" href="/docs" variant="secondary">
    Open help
  </ButtonLink>
</ErrorState>

import { Button, ButtonLink, ErrorState } from '@santi020k/lumen-react'

export const Example = () => (
  <ErrorState
    actions={(
      <>
        <Button size="sm">Try again</Button>
        <ButtonLink href="/docs" variant="secondary">Open help</ButtonLink>
      </>
    )}
    description="Check your connection and try again. Your existing projects are unchanged."
    id="projects-error"
    reference="REQ-4F82"
    title="Could not load projects"
  />
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-error-state id="projects-error" aria-labelledby="projects-error-title">
  <lumen-illustration
    aria-hidden="true"
    data-slot="error-state-graphic"
    variant="error"
  ></lumen-illustration>
  <div data-slot="error-state-content">
    <h2 data-slot="error-state-title" id="projects-error-title">Could not load projects</h2>
    <p data-slot="error-state-description">
      Check your connection and try again. Your existing projects are unchanged.
    </p>
    <p data-slot="error-state-reference">Reference: <code>REQ-4F82</code></p>
  </div>
  <div data-slot="error-state-actions">
    <lumen-button size="sm">Try again</lumen-button>
    <a class="ui-button ui-button--secondary ui-button--sm" href="/docs">Open help</a>
  </div>
</lumen-error-state>