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 Types Variant
Button Colors Variant
Button Sizes Variant
Button Shape Variant
Button With Icon
API Reference

Button Types Variant#

There are lots of button types for the best fits design of your application. Available types : default primary dashed text linkPrimary linkGray outlineGray and outlinePrimary.

Button Colors Variant#

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

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: pill 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
href	URL to navigate when the button is clicked.	string	None
color	Color variant of the button	error info success warning	info
type	Type of the button.	primary dashed text linkPrimary linkGray outlineGray outlinePrimary default	default
notificationLabel	Label for notification badge on the button.	string	None
pill	Apply pill-shaped styling to the button.	boolean	false
circle	Apply circular styling to the button.	boolean	false
positionInGroup	Position of the button within a button group.	start end middle	start
size	Size variant of the button.	xs sm md lg xl 2xl	md
width	Width of the button	full half	None
customClass	Custom CSS class to be added to the button.	string	None
onClick	Function to be called when the button is clicked.	() => void	function