Buttons are used to trigger an action. You can use them in forms, dialogs, and more.
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 Tooltip from '@radui/ui/Tooltip'; import Button from '@radui/ui/Button'; 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 }} /> <Tooltip label={buttonStyleDescription[variant]} placement="bottom"> <Text className="text-gray-800 font-light inline-block cursor-help"> {variant} </Text> </Tooltip> </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;