Alert

import { useState } from 'react'
import {
  Alert,
  AlertBody,
  AlertCancel,
  AlertFooter,
  AlertIcon,
  AlertText,
  AlertTitle,
  Button
} from '@chassis-ui/react'

export const Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button color="danger" onClick={() => setVisible(true)}>
        Delete file
      </Button>
      <Alert visible={visible} onVisibleChange={setVisible}>
        <AlertIcon name="exclamation-triangle-solid" color="danger" />
        <AlertBody>
          <AlertTitle>Delete the file?</AlertTitle>
          <AlertText>This file will be removed for everyone. This can't be undone.</AlertText>
        </AlertBody>
        <AlertFooter>
          <Button color="danger" onClick={() => setVisible(false)}>
            Delete file
          </Button>
          <AlertCancel>Cancel</AlertCancel>
        </AlertFooter>
      </Alert>
    </>
  )
}

import { useState } from 'react'
import {
  Alert,
  AlertBody,
  AlertCancel,
  AlertCode,
  AlertFooter,
  AlertIcon,
  AlertText,
  AlertTitle,
  Button
} from '@chassis-ui/react'

export const Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>Upload</Button>
      <Alert visible={visible} onVisibleChange={setVisible}>
        <AlertIcon name="exclamation-circle-solid" color="danger" />
        <AlertBody>
          <AlertTitle>Upload failed</AlertTitle>
          <AlertCode>ERR-1234</AlertCode>
          <AlertText>
            The server refused the file. Try again, or contact support with the code above.
          </AlertText>
        </AlertBody>
        <AlertFooter>
          <AlertCancel>Close</AlertCancel>
        </AlertFooter>
      </Alert>
    </>
  )
}

import { useState } from 'react'
import { Alert, AlertBody, AlertFooter, AlertText, AlertTitle, Button } from '@chassis-ui/react'

export const Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>Show alert</Button>
      <Alert closeButton closeLabel="Close alert" visible={visible} onVisibleChange={setVisible}>
        <AlertBody>
          <AlertTitle>Your session is about to expire</AlertTitle>
          <AlertText>
            Renew it to keep working, or close this and be signed out in 2 minutes.
          </AlertText>
        </AlertBody>
        <AlertFooter>
          <Button color="primary" onClick={() => setVisible(false)}>
            Renew session
          </Button>
        </AlertFooter>
      </Alert>
    </>
  )
}

import { useState } from 'react'
import {
  Alert,
  AlertBody,
  AlertCancel,
  AlertFooter,
  AlertIcon,
  AlertText,
  AlertTitle,
  Button
} from '@chassis-ui/react'

export const Example = () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>Leave page</Button>
      <Alert visible={visible} onVisibleChange={setVisible}>
        <AlertIcon name="info-circle-solid" />
        <AlertBody>
          <AlertTitle>Save changes?</AlertTitle>
          <AlertText>Do you want to save your changes before leaving the page?</AlertText>
        </AlertBody>
        <AlertFooter stacked>
          <Button color="primary" onClick={() => setVisible(false)}>
            Save changes
          </Button>
          <AlertCancel>Cancel</AlertCancel>
          <Button
            className="sm:me-auto"
            color="danger"
            variant="outline"
            onClick={() => setVisible(false)}
          >
            Discard
          </Button>
        </AlertFooter>
      </Alert>
    </>
  )
}

import { useState } from 'react'
import {
  Alert,
  AlertBody,
  AlertCancel,
  AlertFooter,
  AlertIcon,
  AlertText,
  AlertTitle,
  Button,
  TextInput
} from '@chassis-ui/react'

export const Example = () => {
  const [step, setStep] = useState<'none' | 'ask' | 'confirm'>('none')
  const [typed, setTyped] = useState('')
  const close = () => {
    setStep('none')
    setTyped('')
  }
  return (
    <>
      <Button color="danger" onClick={() => setStep('ask')}>
        Delete account
      </Button>
      <Alert visible={step === 'ask'} onClose={close}>
        <AlertIcon name="exclamation-triangle-solid" color="danger" />
        <AlertBody>
          <AlertTitle>Delete your account?</AlertTitle>
          <AlertText>All of your data will be removed.</AlertText>
        </AlertBody>
        <AlertFooter>
          <Button color="danger" onClick={() => setStep('confirm')}>
            Delete account
          </Button>
          <AlertCancel>Cancel</AlertCancel>
        </AlertFooter>
      </Alert>
      <Alert visible={step === 'confirm'} onClose={close}>
        <AlertIcon name="exclamation-triangle-solid" color="danger" />
        <AlertBody>
          <AlertTitle>Final confirmation</AlertTitle>
          <AlertText>
            This is permanent. Type <strong>DELETE</strong> to confirm.
          </AlertText>
          <TextInput
            aria-label="Type DELETE to confirm"
            data-autofocus=""
            value={typed}
            onChange={setTyped}
          />
        </AlertBody>
        <AlertFooter>
          <Button color="danger" disabled={typed !== 'DELETE'} onClick={close}>
            Confirm delete
          </Button>
          <AlertCancel>Cancel</AlertCancel>
          <Button className="sm:me-auto" variant="link" onClick={() => setStep('ask')}>
            Go back
          </Button>
        </AlertFooter>
      </Alert>
    </>
  )
}