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 types page for type information.
Name | Type | Default |
---|---|---|
textSize | Textsize | 'text-sm' |
color | Buttonshadows | 'blue' |
type | ButtonType | 'button' |