Button - Keep React

The Buttons component in the Keep React offers a variety of button types, sizes, and states to meet your design needs. With options for icons and destructiveness, you can create visually appealing and functional buttons for your product.

Table of Contents#

Button Variant Type
Button Colors Variant
Button Sizes Variant
Button Shape Variant
Button With Icon
API Reference

Button Variant Type#

There are two kinds of button variant types. Available types : link and outline.

Button Colors Variant#

Here are the available color variants for the Button component, each with its own unique color scheme: primary secondary success warning and error.

Button Sizes Variant#

Here are the available size options for the Button component : xs sm md lg xl and 2xl.

Button Shape Variant#

There are two available button shape variant: icon and circle props for added variety and style.

Button With Icon#

Our design system, you have the flexibility to position icons on either the left or right side of the button.

API Reference#

Explore the available props for the button component

Property	Description	Type	Default
color	Color variant of the button	primary secondary error success warning	primary
variant	Variant of the button.	link outline	outline
shape	Apply circular styling to the button.	circle icon	circle
position	Position of the button within a button group.	start end center	start
size	Size variant of the button.	xs sm md lg xl 2xl	md