We're actively working on new components and features. Stay tuned! Head over to our GitHub to see what's coming next.
Buttons are interactive elements used to trigger actions, submit forms, and navigate users through an application.
import Button from "@radui/ui/Button" const ButtonExample = () => ( <div> <Button color="green">Click Me!</Button> </div> )
solid
soft
outline
ghost
import Text from '@radui/ui/Text'; import Separator from '@radui/ui/Separator'; import Button from '@radui/ui/Button'; import TooltipWrapper from '@/components/ui/Tooltip'; const Arrow = () => ( <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd" /> </svg> ); const ButtonVariants = () => { const buttonVariants = ['solid', 'soft', 'outline', 'ghost']; const buttonStyleDescription = { solid: 'Solid buttons are the most common type of button. They have a solid background color and a border.', soft: 'Soft buttons have a soft background color and a border.', outline: 'Outline buttons have a border and a background color.', ghost: 'Ghost buttons have a border and a background color.', }; return ( <div> <div className="flex items-center gap-4"> {buttonVariants.map((variant) => ( <span key={variant}> <Button variant={variant} className="space-x-2"> <span >Button</span> <Arrow /> </Button> <Separator orientation="horizontal" style={{ marginTop: 20 }} /> <TooltipWrapper label={buttonStyleDescription[variant]} placement="bottom"> <Text className="text-gray-800 font-light inline-block cursor-help"> {variant} </Text> </TooltipWrapper> </span> ))} </div> </div> ); }; export default ButtonVariants;
import Button from '@radui/ui/Button'; const ButtonSizes = () => { const sizes = ['small', 'medium', 'large', 'x-large']; const variants = ['solid', 'soft', 'outline', 'ghost']; return <div className='flex flex-col gap-4'> {variants.map((variant, index) => { return <div key={index} className='flex items-center gap-4'> {sizes.map((size, index) => { return <Button key={index} size={size} variant={variant}> <span>Button</span> </Button> })} </div> })} </div> } export default ButtonSizes;
import Button from '@radui/ui/Button'; const ButtonColor = () => { const sizes = ['small', 'medium', 'large', 'x-large']; const variants = ['solid', 'soft', 'outline', 'ghost']; return <div className='flex flex-col gap-4'> {variants.map((variant, index) => { return <div key={index} className='flex items-center gap-4'> {sizes.map((size, index) => { return <Button key={index} size={size} variant={variant} color='pink'>Button</Button> })} </div> })} </div> } export default ButtonColor;
An interactive component used to trigger an action or event, such as submitting a form, opening a dialog, or performing a delete operation.
Prop | Type | Default |
---|---|---|
children | ReactNode | -- |
type | enum | 'button' |
className | string | '' |
customRootClass | string | '' |
variant | string | '' |
size | string | '' |
color | string | '' |
disabled | boolean | false |