Button

Button is a component that use to trigger an action. It can be use as a link or a button. With our components we provide many variant and function. You can easily use it.

This components. Store at src/components/atoms/button/Button.tsx

Basic example

This is an example of how to use the button component. This button have many props that you can pass trough it.

ExampleCode

value : 0

Variant

You can use the variant prop to change the variant of the button. The default variant is primary. And there are 3 variant that you can choose.

primary: This variant is used to show the primary action.
seconday: This variant is used to show the secondary action or action that not much important
text: This variant is used to show the text action.

ExampleCode

Rounded

You can use the rounded prop to change the rounded of the button. This prop is boolean if it set to true the button will be fully rounded.

ExampleCode

Size

Default of the button is full width. But you can use the wFit to set the button to fit the content.

ExampleCode

Width full

Width fit

Width fit and rounded

With Icon

Button can be use with icon. You can use icon from heroicons or any other icon library. In default button are style to align center and justify center with the gap 8px.

ExampleCode

Link button

Button can be use as a link. You can use it to navigate to another page. It can be navigate in href attribute. Also you can set the link to open in new tab by using target attribute.

ExampleCode

Link Link with target

Progress and ready

You can use the isReady prop to show the button is ready or not. If the button is not ready, it will show a processing block inside the button. This is useful for showing the progress of an action.

ExampleCode

Toggle to ready button

Ready status : false

Title

In some case button lable can't be too long. Then you can use title to show the full text. It will show the full text when you hover the button. You can use it by using title attribute.

ExampleCode

Disable

You can disable the button by using disable attribute. It will make the button unclickable.

ExampleCode

Toggle to disable button

Disable status : false

Disable as link

Attribute

id: string; The id of the button.
children: ReactNode (required); This is the content of the button.
className: string; This is the class name that you can style the button. Some of them required to use important.
variant: string; The preset style of button. There are 5 variant Primary, Secondary, Rounded, Rounded Secondary, and Text.
onClick: function; The function that will be called when the button is clicked.
href: string; The link that the button will redirect to. If this is set, the button will be a link automatically.
target: string; The target of the link. If this is set with "_blank" the link will open in new tab.
wFit: boolean; The style of the button. If this is set, the button will apply w-fit class to the button. (mostly it full width as default)
title: string; The title of the button.
disabled: boolean; The status of the button. If this is set, the button will be disabled.

Term of service

Privacy statement