| layout | hideBreadcrumbs | description | hideToc |
|---|---|---|---|
DefaultLayout |
true |
Alert is a notification that keeps people informed of the status of the system and which may or not require the user response. |
true |
{{ $frontmatter.description }}
A simple version of the alert that has a neutral grey color.
::: slot usage
<<<../../preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
<<<../../preview/next/pages/showcases/Alert/AlertNeutral.tsx#source
:::
<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
This type is informative just like neutral except that its palette is more noticeable.
::: slot usage <<<../../preview/nuxt/pages/showcases/Alert/AlertSecondary.vue <<<../../preview/next/pages/showcases/Alert/AlertSecondary.tsx#source ::: <<<../../preview/nuxt/pages/showcases/Alert/Alert.vue <<<../../preview/next/pages/showcases/Alert/Alert.tsx#sourceA green color indicates that an action was successful.
::: slot usage <<<../../preview/nuxt/pages/showcases/Alert/AlertPositive.vue <<<../../preview/next/pages/showcases/Alert/AlertPositive.tsx#source ::: <<<../../preview/nuxt/pages/showcases/Alert/Alert.vue <<<../../preview/next/pages/showcases/Alert/Alert.tsx#sourceAlert can be more descriptive and its content can be split into title and description.
::: slot usage <<<../../preview/nuxt/pages/showcases/Alert/AlertWarning.vue <<<../../preview/next/pages/showcases/Alert/AlertWarning.tsx#source ::: <<<../../preview/nuxt/pages/showcases/Alert/Alert.vue <<<../../preview/next/pages/showcases/Alert/Alert.tsx#sourceThis type is usually used for information displayed when an important problem occurs.
::: slot usage <<<../../preview/nuxt/pages/showcases/Alert/AlertError.vue <<<../../preview/next/pages/showcases/Alert/AlertError.tsx#source ::: <<<../../preview/nuxt/pages/showcases/Alert/Alert.vue <<<../../preview/next/pages/showcases/Alert/Alert.tsx#source