Button

Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.

Import

import { Button } from "@recastui/react";

Usage

Editable Example

<Button>Button</Button>

Variants

Use the variant prop to change the visual style of the Button. You can set the value to solid, outline, ghost or link. Default variant is “solid”.

Editable Example

<div className="space-x-2">
		<Button variant='solid'>Button</Button>
		<Button variant='outline'>Button</Button>
		<Button variant='ghost'>Button</Button>
		<Button variant='link'>Button</Button>
	</div>

Sizes

Use the size prop to change the size of the button. You can set the value to xs, sm, base, lg or xl. Default size is “base”.

Editable Example

<div className="space-x-2">
		<Button size='xs'>Button</Button>
		<Button size='sm'>Button</Button>
		<Button size='base'>Button</Button>
		<Button size='lg'>Button</Button>
		<Button size='xl'>Button</Button>
	</div>

Colors

Use the color prop to change the color scheme of the Button. You can set the value to any of the color scales from your Radix-Colors, like: ‘tomato’, ‘red’, ‘crimson’, ‘pink’, ‘plum’, ‘purple’, ‘violet’, ‘indigo’, ‘blue’, ‘cyan’, ‘teal’, ‘green’, ‘grass’, ‘orange’, ‘brown’, ‘sky’, ‘mint’, ‘lime’, ‘yellow’, ‘amber’, ‘gold’ and ‘bronze’.

There are some custom colors introduced by Recastui to represent state like: ‘error’, ‘info’, ‘success’ and ‘warning’ that point to existing radix-colors.

A color “main” has been added as “default” color to represent monochrome layout.

Editable Example

<div>
	<div className="space-y-2">Default color:</div>
	<div className="grid gap-2 grid-cols-3 lg:grid-cols-5 mb-2">
		<Button>main</Button>
	</div>
	<div className="space-y-2">Stateful colors:</div>
	<div className="grid gap-2 grid-cols-3 lg:grid-cols-5 mb-2">
		<Button color='success'>success</Button>
		<Button color='info'>info</Button>
		<Button color='warning'>warning</Button>
		<Button color='error'>error</Button>
	</div>
	<div className="space-y-2">All other colors:</div>
	<div className="grid gap-2 grid-cols-3 lg:grid-cols-5">
		<Button color='tomato'>tomato</Button>
		<Button color='red'>red</Button>
		<Button color='crimson'>crimson</Button>
		<Button color='pink'>pink</Button>
		<Button color='plum'>plum</Button>
		<Button color='purple'>purple</Button>
		<Button color='violet'>violet</Button>
		<Button color='indigo'>indigo</Button>
		<Button color='blue'>blue</Button>
		<Button color='cyan'>cyan</Button>
		<Button color='teal'>teal</Button>
		<Button color='green'>green</Button>
		<Button color='grass'>grass</Button>
		<Button color='orange'>orange</Button>
		<Button color='brown'>brown</Button>
		<Button color='sky'>sky</Button>
		<Button color='mint'>mint</Button>
		<Button color='lime'>lime</Button>
		<Button color='yellow'>yellow</Button>
		<Button color='amber'>amber</Button>
		<Button color='gold'>gold</Button>
		<Button color='bronze'>bronze</Button>
	</div>
</div>

Full width

Use the fullWidth prop to make the Button 100% width of it’s parent.

Editable Example

<div className="space-x-2">
		<Button fullWidth>Full width</Button>
	</div>

Disabled

Use the disabled prop to disable the Button and apply appropriate styles.

Editable Example

<div className="space-x-2">
		<Button disabled>Disabled</Button>
	</div>

Rounded

Use the rounded prop to add rounded corners for the Button.

Editable Example

<div className="space-x-2">
		<Button rounded>Rounded</Button>
	</div>

Pill

Use the pill prop to fully round the Button corners.

Editable Example

<div className="space-x-2">
		<Button pill>Pill</Button>
	</div>

Square

Use the square prop to have same width and height of the Button with different sizes *xs, sm, base, lg or xl.

Editable Example

<div className="space-x-2">
		<Button square='xs'>xs</Button>
		<Button square='sm'>sm</Button>
		<Button square='base'>base</Button>
		<Button square='lg'>lg</Button>
		<Button square='xl'>xl</Button>
	</div>

Recipes

Circle

Use the square & pill props together to create a circle.

Editable Example

<div className="space-x-2">
	<Button pill square='xs' className='border-0'>xs</Button>
	<Button variant='outline' pill square='sm'>sm</Button>
	<Button pill square='base' className='border-0'>base</Button>
	<Button pill square='lg' className='border-0'>lg</Button>
	<Button pill square='xl' className='border-0'>xl</Button>
	</div>

Icon Buttons

Editable Example

<div className="space-x-2">
	<Button square='base' color='violet' variant='ghost' className='border-0'><IconPlus className='w-6 h-6' aria-hidden="true" focusable="false"/></Button>
	<Button variant='outline' color='indigo' square='base'><IconThumbUp className='w-6 h-6' aria-hidden="true" focusable="false"/></Button>
	<Button square='base' pill color='blue' className='border-0'><IconBrandTwitter className='w-6 h-6' aria-hidden="true" focusable="false"/></Button>
	<Button square='xl' pill color='orange' variant='outline'><IconLoader className='w-8 h-8' aria-hidden="true" focusable="false"/></Button>
	<Button><IconMenu className='w-6 h-6 mr-2' aria-hidden="true" focusable="false"/> Menu</Button>
	</div>