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.
Button
Chakra UI Vue comes with a button component.
To add it, we add the CButton component.
For instance, we can write:
<template>
<c-box>
<c-button variant-color="green">Button</c-button>
</c-box>
</template>
<script>
import { CBox, CButton } from "@chakra-ui/vue";
export default {
components: {
CBox,
CButton,
},
};
</script>
We set the variant-color prop to set its background color.
To set the size of the button, we can set the size prop:
<template>
<c-box>
<c-button variant-color="green" size="lg">Button</c-button>
</c-box>
</template>
<script>
import { CBox, CButton } from "@chakra-ui/vue";
export default {
components: {
CBox,
CButton,
},
};
</script>
lg stands for large.
We can also set it to xs for extra small, sm for small, or md for medium.
To change the look of the button, we can set the variant prop:
<template>
<c-box>
<c-button variant-color="green" variant="outline">Button</c-button>
</c-box>
</template>
<script>
import { CBox, CButton } from "@chakra-ui/vue";
export default {
components: {
CBox,
CButton,
},
};
</script>
We set variant to outline to make the button have outlined style.
We can also set it to solid , ghost or link .
ghost adds a background color to the button only when we hover over it.
Also, we can add an icon in the button with:
<template>
<c-box>
<c-button left-icon="email" variant-color="blue" variant="solid">
Email
</c-button>
</c-box>
</template>
<script>
import { CBox, CButton } from "@chakra-ui/vue";
export default {
components: {
CBox,
CButton,
},
};
</script>
left-icon sets the name of the icon to add.
We can make the button display a loading state with the isLoading prop.
loading-text has the button text to show when the button is in the loading state:
<template>
<c-box>
<c-button
isLoading
loading-text="Submitting"
variant-color="blue"
variant="solid"
>
Email
</c-button>
</c-box>
</template>
<script>
import { CBox, CButton } from "@chakra-ui/vue";
export default {
components: {
CBox,
CButton,
},
};
</script>
We can set other props to style the button.
To do this, we write:
<template>
<c-box>
<c-button height="50px" width="250px" border="2px" border-color="green.500">
Email
</c-button>
</c-box>
</template>
<script>
import { CBox, CButton } from "@chakra-ui/vue";
export default {
components: {
CBox,
CButton,
},
};
</script>
We set the height , width , border , and border-color props to set the corresponding CSS properties.
Conclusion
We can add buttons easily into our Vue app with Chakra UI Vue.
