- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color PickerNEW
- Container
- Control Group
- Dialog
- Divider
- Dropdown
- File UploaderNEW
- Flex
- FormSOON
- Grid
- IconSOON
- ImageSOON
- Input
- LinkNEW
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
Button
Our Button makes every click satisfying. With it, you can make actions crystal clear and a pleasure to press!
Example
1 import { Button, Flex } from '@haktos/sugarcoat-ui';23 <Flex gap='3' justify='cen<ter'>4 <Buttons>Click Me</Buttons>5 </Flex>6
API Reference
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. |
Component Properties
Button
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 |
ToggleButton
It builds on top of Radix-UI Toggle
It has the same properties as the Button, plus the following ones:
Prop | Type | Default | Explanation |
---|---|---|---|
defaultPressed | boolean | - | The default state of the ToggleButton |
pressed | boolean | - | The state of the ToggleButton |