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';
2
3 <Flex gap='3' justify='cen<ter'>
4 <Buttons>Click Me</Buttons>
5 </Flex>
6

API Reference

ComponentDescription
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
PropTypeDefaultExplanation
sizestringmd

The size of the Button.

variantstringdefault

The variant type of the Button

colorstringdefault

The color of the Button

borderstringsolid

The border style of the Button (only for outline variant)

radiusstringmd

The radius of the Button corners

shadowstringmd

The shadow of the Button

blockbooleanfalse

Make the Button a block element, filling the width of its parent.

animationbooleantrue

Enable/disable the animation of the Button when clicked or hovered.

tooltipstring-

The tooltip to be displayed when the Button is hovered.

iconReact.ReactNode-

The icon to be displayed in the Button.

iconPositionstringleft

The position of the icon in the Button.

onClickfunction-

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:

PropTypeDefaultExplanation
defaultPressedboolean-

The default state of the ToggleButton

pressedboolean-

The state of the ToggleButton