Button

A versatile button component that supports various styles, sizes, and interactive states. Built on top of our design system for consistent styling and behavior.

Examples

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

API Reference

Component	Description
Button	A versatile button component that supports various styles, sizes, and interactive states. Built on top of our design system for consistent styling and behavior.

Component Properties

Button

Prop	Type	Default	Explanation
`size`	`string`	md	The size of the Button.
`variant`	`string`	default	The visual style variant of the button
`color`	`string`	default	The color scheme of the button
`border`	`string`	-	The border style (only applicable to outline variant)
`shadow`	`string`	-	The shadow size of the button
`icon`	`React.ReactNode`	-	Optional icon element to display alongside the button text
`tooltip`	`string`	-	Optional tooltip text to show on hover
`href`	`string`	-	Optional URL to navigate to when clicked (turns button into a link)
`target`	`string`	-	Optional target attribute when using href (e.g., '_blank')
`iconPosition`	`string`	left	Position of the icon relative to the text
`block`	`boolean`	false	Whether the button should take the full width of its container
`animation`	`boolean`	true	Whether the button should have transition animations

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius