Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.8

Alert

Alert is a component that conveys information to the user.

Source@yamada-ui/alert

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.

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

PreviousFeedbackNextStatus