Colored Shadow Buttons
text-sm
<ColorShadowButton color="blue" >Blue</ColorShadowButton>
<ColorShadowButton color="green" >Green</ColorShadowButton>
<ColorShadowButton color="cyan" >Cyan</ColorShadowButton>
<ColorShadowButton color="teal" >Teal</ColorShadowButton>
<ColorShadowButton color="lime" >Lime</ColorShadowButton>
<ColorShadowButton color="red" >Red</ColorShadowButton>
<ColorShadowButton color="pink" >Ping</ColorShadowButton>
<ColorShadowButton color="purple" >Purple</ColorShadowButton>text-xs
<ColorShadowButton color="blue" textSize="text-xs" >Blue</ColorShadowButton>
<ColorShadowButton color="green" textSize="text-xs" >Green</ColorShadowButton>
<ColorShadowButton color="cyan" textSize="text-xs" >Cyan</ColorShadowButton>
<ColorShadowButton color="teal" textSize="text-xs" >Teal</ColorShadowButton>
<ColorShadowButton color="lime" textSize="text-xs" >Lime</ColorShadowButton>
<ColorShadowButton color="red" textSize="text-xs" >Red</ColorShadowButton>
<ColorShadowButton color="pink" textSize="text-xs" >Ping</ColorShadowButton>
<ColorShadowButton color="purple" textSize="text-xs" >Purple</ColorShadowButton>text-base
<ColorShadowButton color="blue" textSize="text-base">Blue</ColorShadowButton>
<ColorShadowButton color="green" textSize="text-base">Green</ColorShadowButton>
<ColorShadowButton color="cyan" textSize="text-base">Cyan</ColorShadowButton>
<ColorShadowButton color="teal" textSize="text-base">Teal</ColorShadowButton>
<ColorShadowButton color="lime" textSize="text-base">Lime</ColorShadowButton>
<ColorShadowButton color="red" textSize="text-base">Red</ColorShadowButton>
<ColorShadowButton color="pink" textSize="text-base">Ping</ColorShadowButton>
<ColorShadowButton color="purple" textSize="text-base">Purple</ColorShadowButton>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' |