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#

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

Default Button#

The Default Button is the most basic button style. It serves as a foundation for all button variations.

Button Colors Variant#

You can customize your buttons with different color schemes to match your design requirements. Available color options include: primary secondary success warning and error.

Button Variant Type#

Choose from different button types depending on your use case. The available types include: default softBg outline and link.

Button Shape Variant#

Create unique button shapes by using the following options: icon and circle props for added variety and style.

Button Radius Variant#

Define the button's border radius for different looks radius props as full.

Button With Icon#

Enhance buttons by including icons alongside text.

Button Sizes Variant#

Buttons come in various sizes to fit different contexts. Available size options include: xs sm md lg xl and 2xl.

API Reference#

Refer to the following table to explore all available props and options 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 softBg default	outline
shape	Apply circular styling to the button.	circle icon	circle
radius	Button radius	default full	default
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

Edit this page Button Group