Stay tuned for more updates on the Sweet Buttons documentation.
Progress and icons buttons are in the works. Check back soon for updates!
Type: string
Default: 'primary'
Options: primary, confirm, error, warning, violet
Description: Defines the color theme of the button.
<Button colorscheme="primary"> Click me </Button>
Type: string
Default: 'solid'
Options: solid, ghost, outline, link, soft, shadow
Description: Defines the look and feel of the button.
<Button variant="ghost"> Click me </Button>
Type: string
Default: 'md'
Options: sm, md, lg
Description: Sets the size of the button.
<Button size="lg"> Click me </Button>
Type: string
Default: 'md'
Options: none, md, lg, xl, pill
Description: Sets the shape (radius) of the button.
<Button shape="lg"> Click me </Button>
Type: boolean
Default: false
Options: true, false
Description: If true, the button will be disabled.
<Button _isDisabled={true}>
Click me
</Button>Type: function
Default: null
Options: can pass your own functions
Description: Used to handle onClick events.
<Button onClick={() => handleButtonClick()}>
Click me
</Button>Type: string
Default: null
Options: any string
Description: Adds context to button for assistive technologies.
<Button aria-label="Click me Button!"> Click me </Button>