Gradient Monochrome Buttons
text-sm
<GradientMonochromeButton color="blue" name="blue"/>
<GradientMonochromeButton color="green" name="green"/>
<GradientMonochromeButton color="cyan" name="cyan"/>
<GradientMonochromeButton color="teal" name="teal"/>
<GradientMonochromeButton color="lime" name="lime"/>
<GradientMonochromeButton color="red" name="red"/>
<GradientMonochromeButton color="pink" name="pink"/>
<GradientMonochromeButton color="pink" name="purple"/>
text-xs
<GradientMonochromeButton color="blue" name="blue" textSize="text-xs"/>
<GradientMonochromeButton color="green" name="green" textSize="text-xs"/>
<GradientMonochromeButton color="cyan" name="cyan" textSize="text-xs"/>
<GradientMonochromeButton color="teal" name="teal" textSize="text-xs"/>
<GradientMonochromeButton color="lime" name="lime" textSize="text-xs"/>
<GradientMonochromeButton color="red" name="red" textSize="text-xs"/>
<GradientMonochromeButton color="pink" name="pink" textSize="text-xs"/>
<GradientMonochromeButton color="pink" name="purple" textSize="text-xs"/>
text-base
<GradientMonochromeButton color="blue" name="blue" textSize="text-base"/>
<GradientMonochromeButton color="green" name="green" textSize="text-base"/>
<GradientMonochromeButton color="cyan" name="cyan" textSize="text-base"/>
<GradientMonochromeButton color="teal" name="teal" textSize="text-base"/>
<GradientMonochromeButton color="lime" name="lime" textSize="text-base"/>
<GradientMonochromeButton color="red" name="red" textSize="text-base"/>
<GradientMonochromeButton color="pink" name="pink" textSize="text-base"/>
<GradientMonochromeButton color="pink" name="purple" textSize="text-base"/>
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' |
name | string | 'Read more' |
type | ButtonType | 'button' |