The most basic usage of the button component is for some CTA.

import {Button} from '@adiranids/react-tailwind'
function App() {
return ( <Button> Click Me </Button> );

The above code will produce the result as shown in the image below.


By default the button is primary button (primary blue color). You can change this by changing the buttonType prop

Here are all the props and their values you can use for Button component

Prop Default Value Description
buttonType (type = string) primary

Can have either of the value primary, warning, secondary, danger, success, dark, light.

Example for success (green button)

<Button buttonType='success' @click='sendmessage'>Send Message</Button>

gradient (type = boolean) true If set to true, the background will be a gradient else single color.
gradientDirection (type = string) r Determines the background gradient direction.
Available values are r,l,b,t refering to right, left, bottom, top respectively
pillShape (type = boolean) false If set to true then the button will be in a pill shape else normal shape.

Here is an example with all the props in action

import {Button} from '@adiranids/react-tailwind'
function App() {
return ( <Button gradient={false} buttonType="warning" pillshape={true} onClick={showAlert} > Click Me </Button> );

All props example of button component

Copyright © 2021 Adirani Digital Solutions Ltd