Alert

Alert is a component that conveys information to the user.

Import

import {
  Alert,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@yamada-ui/react"

Copied!

Alert: A wrapper component for the alert.
AlertIcon: A component that displays the icon for the alert's status.
AlertTitle: A component that displays the title of the alert.
AlertDescription: A component that displays the description of the alert.

Usage

Editable example

<Alert>
  <AlertIcon />
  <AlertTitle>セル</AlertTitle>
  <AlertDescription>
    か…完全体に………完全体になれさえすれば………！！！
  </AlertDescription>
</Alert>

Copied!

Changing the Status

The color scheme and icon change according to the status. The default is set to info.

The color scheme and icons for statuses can be customized in the config's alert.statuses. If you want to customize the config, please check here.

Editable example

<VStack>
  <Alert status="info">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert status="success">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert status="warning">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert status="error">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>
</VStack>

Copied!

Changing the Variant

Editable example

<VStack>
  <Alert variant="subtle">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert variant="solid">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert variant="island-accent">
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert variant="top-accent">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert variant="left-accent">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>
</VStack>

Copied!

Changing the Color Scheme

While the color scheme and icon change according to the status, you can override the color scheme by changing it.

Editable example

<VStack>
  <Alert status="info" colorScheme="green">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert status="success" colorScheme="purple">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert status="warning" colorScheme="sky">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert status="error" colorScheme="pink">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>
</VStack>

Copied!

Changing the Layout

Here is an example of changing the layout of the alert.

Editable example

<VStack>
  <Alert
    status="success"
    flexDirection="column"
    justifyContent="center"
    alignItems="center"
    textAlign="center"
    h="2xs"
  >
    <AlertIcon boxSize="40px" mr={0} />
    <AlertTitle fontSize="lg" mt={4} mb={1} mr={0}>
      セル
    </AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert status="success">
    <AlertIcon />
    <Box>
      <AlertTitle>セル</AlertTitle>
      <AlertDescription>
        か…完全体に………完全体になれさえすれば………！！！
      </AlertDescription>
    </Box>
    <CloseButton position="absolute" top={2} right={2} onClick={() => {}} />
  </Alert>
</VStack>

Copied!

Applying Loading

By setting the status to loading, you can apply a loading animation.

Editable example

<VStack>
  <Alert status="loading" variant="subtle">
    <AlertIcon />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert status="loading" variant="solid">
    <AlertIcon variant="grid" />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert status="loading" variant="subtle">
    <AlertIcon variant="puff" color="blue.500" />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>

  <Alert status="loading" variant="solid">
    <AlertIcon variant="dots" />
    <AlertTitle>セル</AlertTitle>
    <AlertDescription>
      か…完全体に………完全体になれさえすれば………！！！
    </AlertDescription>
  </Alert>
</VStack>

Copied!

Customize components

You can change the icons and color schemes for each status by Customize Config.

import { UIProvider, extendConfig } from "@yamada-ui/react"

const customConfig = extendConfig({
  alert: {
    statuses: {
      success: { icon: CustomIcon, colorScheme: "pink" },
    },
  },
})

const App = () => {
  return (
    <UIProvider config={customConfig}>
      <YourApplication />
    </UIProvider>
  )
}

Copied!

Edit this page on GitHub

PreviousFeedback NextStatus