Gradient Monochrome Buttons

text-sm

<GradientMonochromeButton color="blue">blue</GradientMonochromeButton>
<GradientMonochromeButton color="green">green</GradientMonochromeButton>
<GradientMonochromeButton color="cyan">cyan</GradientMonochromeButton>
<GradientMonochromeButton color="teal">teal</GradientMonochromeButton>
<GradientMonochromeButton color="lime">lime</GradientMonochromeButton>
<GradientMonochromeButton color="red">red</GradientMonochromeButton>
<GradientMonochromeButton color="pink">pink</GradientMonochromeButton>
<GradientMonochromeButton color="pink">purple</GradientMonochromeButton>

text-xs

<GradientMonochromeButton color="blue" textSize="text-xs">blue</GradientMonochromeButton>
<GradientMonochromeButton color="green" textSize="text-xs">green</GradientMonochromeButton>
<GradientMonochromeButton color="cyan" textSize="text-xs">cyan</GradientMonochromeButton>
<GradientMonochromeButton color="teal" textSize="text-xs">teal</GradientMonochromeButton>
<GradientMonochromeButton color="lime" textSize="text-xs">lime</GradientMonochromeButton>
<GradientMonochromeButton color="red" textSize="text-xs">red</GradientMonochromeButton>
<GradientMonochromeButton color="pink" textSize="text-xs">pink</GradientMonochromeButton>
<GradientMonochromeButton color="pink" textSize="text-xs">purple</GradientMonochromeButton>

text-base

<GradientMonochromeButton color="blue" textSize="text-base">blue</GradientMonochromeButton>
<GradientMonochromeButton color="green" textSize="text-base">green</GradientMonochromeButton>
<GradientMonochromeButton color="cyan" textSize="text-base">cyan</GradientMonochromeButton>
<GradientMonochromeButton color="teal" textSize="text-base">teal</GradientMonochromeButton>
<GradientMonochromeButton color="lime" textSize="text-base">lime</GradientMonochromeButton>
<GradientMonochromeButton color="red" textSize="text-base">red</GradientMonochromeButton>
<GradientMonochromeButton color="pink" textSize="text-base">pink</GradientMonochromeButton>
<GradientMonochromeButton color="pink" textSize="text-base">purple</GradientMonochromeButton>

Props

The component has the following props, type, and default values. See type-list page for type information.

Name Type Default
textSize Textsize 'text-sm'
color Buttonshadows 'blue'
type ButtonType 'button'

Default Button

Colored Shadow Button

Gradient Duotone Button

Gradient Monochrome Button

Gradietn Outline Button

Outlined Button

Rounded Button

Button Loader

References

Flowbite Buttons