Button

Our Button makes every click satisfying. With it, you can make actions crystal clear and a pleasure to press!

1  import { Button, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' justify='cen<ter'>
4    <Button>Click Me</Button>
5  </FlexBox>
6

Component	Description
Button	The action instigator. An interactive element that triggers a specific action when clicked, steering the user's journey in your UI.
ToggleButton	The flip-flopper. An interactive button that alternates between two states, providing a clear visual indicator of an on/off or true/false condition in your UI.

Prop	Type	Default	Explanation
`size`	`string`	md	The size of the Button.
`variant`	`string`	default	The variant type of the Button
`color`	`string`	default	The color of the Button
`border`	`string`	solid	The border style of the Button (only for outline variant)
`radius`	`string`	md	The radius of the Button corners
`shadow`	`string`	md	The shadow of the Button
`block`	`boolean`	false	Make the Button a block element, filling the width of its parent.
`animation`	`boolean`	true	Enable/disable the animation of the Button when clicked or hovered.
`tooltip`	`string`	-	The tooltip to be displayed when the Button is hovered.
`icon`	`React.ReactNode`	-	The icon to be displayed in the Button.
`iconPosition`	`string`	left	The position of the icon in the Button.
`onClick`	`function`	-	The function to be called when the Button is clicked

It builds on top of Radix-UI Toggle

Prop	Type	Default	Explanation
`defaultPressed`	`boolean`	-	The default state of the ToggleButton
`pressed`	`boolean`	-	The state of the ToggleButton

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius