UI Development with Chakra UI Vue — Alert Box

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Alert

We can add an alert box into our Vue app with Chakra UI Vue.

To add it, we write:

<template>
  <c-alert status="error">
    <c-alert-icon />
    <c-alert-title :mr="2">Your browser is outdated!</c-alert-title>
    <c-alert-description> Your experience may be degraded.</c-alert-description>
    <c-close-button position="absolute" right="8px" top="8px" />
  </c-alert>
</template>

<script>
import {
  CAlert,
  CAlertIcon,
  CAlertTitle,
  CAlertDescription,
} from "@chakra-ui/vue";

export default {
  name: "App",
  components: {
    CAlert,
    CAlertIcon,
    CAlertTitle,
    CAlertDescription,
  },
};
</script>

We register the CAlert, CAlertIcon, CAlertTitle, and CAlertDescription components.

CAlert is the main container.

CAlertIcon is the alert box icon.

CAlertTitle is the alert box title.

CAlertDescription is the alert box content.

status is set to 'error' makes the box and icon red.

We can also set it to info to make them blue, success to make them green, or warning to make them yellow.

Also, we can set the variant prop to change the shade of the colors.

For instance, we can write:

<template>
  <c-alert status="error" variant="solid">
    <c-alert-icon />
    <c-alert-title :mr="2">Your browser is outdated!</c-alert-title>
    <c-alert-description> Your experience may be degraded.</c-alert-description>
    <c-close-button position="absolute" right="8px" top="8px" />
  </c-alert>
</template>

<script>
import {
  CAlert,
  CAlertIcon,
  CAlertTitle,
  CAlertDescription,
} from "@chakra-ui/vue";

export default {
  name: "App",
  components: {
    CAlert,
    CAlertIcon,
    CAlertTitle,
    CAlertDescription,
  },
};
</script>

to set variant to solid to make the background color redder.

We can also set it to subtle to make it more subtle, left-accent adds a darker color to the left side.

top-accent adds a darker color to the top.

We can add props to add flexbox layout to our alert box.

For instance, we can write:

<template>
  <c-alert
    status="error"
    flexDirection="column"
    justifyContent="center"
    textAlign="center"
    height="200px"
  >
    <c-alert-icon />
    <c-alert-title :mr="2">Your browser is outdated!</c-alert-title>
    <c-alert-description> Your experience may be degraded.</c-alert-description>
    <c-close-button position="absolute" right="8px" top="8px" />
  </c-alert>
</template>

<script>
import {
  CAlert,
  CAlertIcon,
  CAlertTitle,
  CAlertDescription,
} from "@chakra-ui/vue";

export default {
  name: "App",
  components: {
    CAlert,
    CAlertIcon,
    CAlertTitle,
    CAlertDescription,
  },
};
</script>

flexDirection sets the flex-direction CSS property.

justifyContent sets the justify-content CSS property.

textAlign sets the text-align CSS property.

Conclusion

We can add an alert box easily with Chakra UI Vue.