警报 (Alert)

import { Alert } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Alert.Root status="info" title="This is the alert title">
      <Alert.Indicator />
      <Alert.Title>This is the alert title</Alert.Title>
    </Alert.Root>
  )
}

import { Alert } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Alert.Root status="error">
      <Alert.Indicator />
      <Alert.Content>
        <Alert.Title>Invalid Fields</Alert.Title>
        <Alert.Description>
          Your form has some errors. Please fix them and try again.
        </Alert.Description>
      </Alert.Content>
    </Alert.Root>
  )
}

import { Alert, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4" width="full">
      <Alert.Root status="error">
        <Alert.Indicator />
        <Alert.Title>There was an error processing your request</Alert.Title>
      </Alert.Root>

      <Alert.Root status="info">
        <Alert.Indicator />
        <Alert.Title>
          Chakra is going live on August 30th. Get ready!
        </Alert.Title>
      </Alert.Root>

      <Alert.Root status="warning">
        <Alert.Indicator />
        <Alert.Title>
          Seems your account is about expire, upgrade now
        </Alert.Title>
      </Alert.Root>

      <Alert.Root status="success">
        <Alert.Indicator />
        <Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
      </Alert.Root>
    </Stack>
  )
}

import { Alert, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4">
      <Alert.Root status="success" variant="subtle">
        <Alert.Indicator />
        <Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
      </Alert.Root>

      <Alert.Root status="success" variant="solid">
        <Alert.Indicator />
        <Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
      </Alert.Root>

      <Alert.Root status="success" variant="surface">
        <Alert.Indicator />
        <Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
      </Alert.Root>
    </Stack>
  )
}

import { Alert, CloseButton } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Alert.Root>
      <Alert.Indicator />
      <Alert.Content>
        <Alert.Title>Success!</Alert.Title>
        <Alert.Description>
          Your application has been received. We will review your application
          and respond within the next 48 hours.
        </Alert.Description>
      </Alert.Content>
      <CloseButton pos="relative" top="-2" insetEnd="-2" />
    </Alert.Root>
  )
}

import { Alert, Spinner } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Alert.Root
      borderStartWidth="3px"
      borderStartColor="colorPalette.600"
      title="We are loading something"
    >
      <Alert.Indicator>
        <Spinner size="sm" />
      </Alert.Indicator>
      <Alert.Title>We are loading something</Alert.Title>
    </Alert.Root>
  )
}

import { Alert } from "@chakra-ui/react"
import { LuAlarmClockPlus } from "react-icons/lu"

const Demo = () => {
  return (
    <Alert.Root status="warning">
      <Alert.Indicator>
        <LuAlarmClockPlus />
      </Alert.Indicator>
      <Alert.Title>Submitting this form will delete your account</Alert.Title>
    </Alert.Root>
  )
}

import { Alert } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Alert.Root status="info" colorPalette="teal">
      <Alert.Indicator />
      <Alert.Title>This is an info alert but shown as teal</Alert.Title>
    </Alert.Root>
  )
}

import { Alert, Link, Stack } from "@chakra-ui/react"
import { LuPercent } from "react-icons/lu"

const Demo = () => {
  return (
    <Stack gap="4">
      <Alert.Root title="Success" status="success">
        <Alert.Indicator>
          <LuPercent />
        </Alert.Indicator>
        <Alert.Content color="fg">
          <Alert.Title>Black Friday Sale (20% off)</Alert.Title>
          <Alert.Description>
            Upgrade your plan to get access to the sale.
          </Alert.Description>
        </Alert.Content>
        <Link alignSelf="center" fontWeight="medium">
          Upgrade
        </Link>
      </Alert.Root>

      <Alert.Root
        size="sm"
        borderStartWidth="3px"
        borderStartColor="colorPalette.solid"
        alignItems="center"
        title="Success"
        status="success"
      >
        <LuPercent />
        <Alert.Title textStyle="sm">
          Heads up: Black Friday Sale (20% off)
        </Alert.Title>
      </Alert.Root>
    </Stack>
  )
}