Alert

Alertは、ユーザーに情報を伝達するコンポーネントです。

インポート

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

Copied!

Alert: アラートのラッパーコンポーネントです。
AlertIcon: アラートのステータスのアイコンを表示するコンポーネントです。
AlertTitle: アラートのタイトルを表示するコンポーネントです。
AlertDescription: アラートの説明を表示するコンポーネントです。

使い方

編集可能な例

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

Copied!

ステータスを変更する

ステータスに応じて、配色とアイコンが変化します。デフォルトは、infoが設定されています。

ステータスの配色やアイコンは、コンフィグのalert.statusesでカスタマイズすることができます。コンフィグをカスタマイズしたい場合は、こちらをご覧ください。

編集可能な例

<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!

バリアントを変更する

編集可能な例

<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!

カラースキーマを変更する

ステータスに応じて、配色とアイコンが変化しますが、カラースキーマを変更をすることで配色をオーバーライドすることができます。

編集可能な例

<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!

レイアウトを変更する

アラートのレイアウトを変更した例です。

編集可能な例

<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!

ローディングを適応する

statusにloadingを設定することで、ローディングのアニメーションを適応することができます。

編集可能な例

<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!

コンポーネントをカスタマイズする

コンフィグをカスタマイズすることで、各ステータスごとにアイコンとカラースキーマを変更することができます。

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!

GitHubでこのページを編集する

前フィードバック次Status