Button
Button is an interactive component that allows users to perform actions such as submitting forms and toggling modals.
Import
import { Button, ButtonGroup } from "@yamada-ui/react"
Usage
Editable example
<Button>This is Button</Button>
Change Variant
Editable example
<Wrap gap="md"> <Button colorScheme="primary" variant="solid"> Solid </Button> <Button colorScheme="secondary" variant="outline"> Outline </Button> <Button colorScheme="warning" variant="ghost"> Ghost </Button> <Button colorScheme="danger" variant="link"> Link </Button> <Button variant="unstyled">Unstyle</Button> </Wrap>
Change Size
Editable example
<Wrap gap="md"> <Button colorScheme="primary" size="xs"> X Small </Button> <Button colorScheme="secondary" size="sm"> Small </Button> <Button colorScheme="warning" size="md"> Medium </Button> <Button colorScheme="danger" size="lg"> Large </Button> </Wrap>
Change Color Scheme
Editable example
<VStack> <Wrap gap="md"> <Button colorScheme="primary">Primary</Button> <Button colorScheme="secondary">Secondary</Button> <Button colorScheme="success">Success</Button> <Button colorScheme="warning">Warning</Button> <Button colorScheme="danger">Danger</Button> <Button colorScheme="link">Link</Button> <Button colorScheme="gray">Gray</Button> <Button colorScheme="neutral">Neutral</Button> <Button colorScheme="red">Red</Button> <Button colorScheme="rose">Rose</Button> <Button colorScheme="pink">Pink</Button> <Button colorScheme="orange">Orange</Button> <Button colorScheme="amber">Amber</Button> <Button colorScheme="yellow">Yellow</Button> <Button colorScheme="lime">Lime</Button> <Button colorScheme="green">Green</Button> <Button colorScheme="emerald">Emerald</Button> <Button colorScheme="teal">Teal</Button> <Button colorScheme="cyan">Cyan</Button> <Button colorScheme="sky">Sky</Button> <Button colorScheme="blue">Blue</Button> <Button colorScheme="indigo">Indigo</Button> <Button colorScheme="violet">Violet</Button> <Button colorScheme="purple">Purple</Button> <Button colorScheme="fuchsia">Fuchsia</Button> </Wrap> <Wrap gap="md"> <Button variant="outline" colorScheme="primary"> Primary </Button> <Button variant="outline" colorScheme="secondary"> Secondary </Button> <Button variant="outline" colorScheme="success"> Success </Button> <Button variant="outline" colorScheme="warning"> Warning </Button> <Button variant="outline" colorScheme="danger"> Danger </Button> <Button variant="outline" colorScheme="link"> Link </Button> <Button variant="outline" colorScheme="gray"> Gray </Button> <Button variant="outline" colorScheme="neutral"> Neutral </Button> <Button variant="outline" colorScheme="red"> Red </Button> <Button variant="outline" colorScheme="rose"> Rose </Button> <Button variant="outline" colorScheme="pink"> Pink </Button> <Button variant="outline" colorScheme="orange"> Orange </Button> <Button variant="outline" colorScheme="amber"> Amber </Button> <Button variant="outline" colorScheme="yellow"> Yellow </Button> <Button variant="outline" colorScheme="lime"> Lime </Button> <Button variant="outline" colorScheme="green"> Green </Button> <Button variant="outline" colorScheme="emerald"> Emerald </Button> <Button variant="outline" colorScheme="teal"> Teal </Button> <Button variant="outline" colorScheme="cyan"> Cyan </Button> <Button variant="outline" colorScheme="sky"> Sky </Button> <Button variant="outline" colorScheme="blue"> Blue </Button> <Button variant="outline" colorScheme="indigo"> Indigo </Button> <Button variant="outline" colorScheme="violet"> Violet </Button> <Button variant="outline" colorScheme="purple"> Purple </Button> <Button variant="outline" colorScheme="fuchsia"> Fuchsia </Button> </Wrap> <Wrap gap="md"> <Button variant="ghost" colorScheme="primary"> Primary </Button> <Button variant="ghost" colorScheme="secondary"> Secondary </Button> <Button variant="ghost" colorScheme="success"> Success </Button> <Button variant="ghost" colorScheme="warning"> Warning </Button> <Button variant="ghost" colorScheme="danger"> Danger </Button> <Button variant="ghost" colorScheme="link"> Link </Button> <Button variant="ghost" colorScheme="gray"> Gray </Button> <Button variant="ghost" colorScheme="neutral"> Neutral </Button> <Button variant="ghost" colorScheme="red"> Red </Button> <Button variant="ghost" colorScheme="rose"> Rose </Button> <Button variant="ghost" colorScheme="pink"> Pink </Button> <Button variant="ghost" colorScheme="orange"> Orange </Button> <Button variant="ghost" colorScheme="amber"> Amber </Button> <Button variant="ghost" colorScheme="yellow"> Yellow </Button> <Button variant="ghost" colorScheme="lime"> Lime </Button> <Button variant="ghost" colorScheme="green"> Green </Button> <Button variant="ghost" colorScheme="emerald"> Emerald </Button> <Button variant="ghost" colorScheme="teal"> Teal </Button> <Button variant="ghost" colorScheme="cyan"> Cyan </Button> <Button variant="ghost" colorScheme="sky"> Sky </Button> <Button variant="ghost" colorScheme="blue"> Blue </Button> <Button variant="ghost" colorScheme="indigo"> Indigo </Button> <Button variant="ghost" colorScheme="violet"> Violet </Button> <Button variant="ghost" colorScheme="purple"> Purple </Button> <Button variant="ghost" colorScheme="fuchsia"> Fuchsia </Button> </Wrap> </VStack>
Disable
To disable, set disabled to true.
Editable example
<Wrap gap="md"> <Button colorScheme="primary" variant="solid" disabled> Solid </Button> <Button colorScheme="secondary" variant="outline" disabled> Outline </Button> <Button colorScheme="warning" variant="ghost" disabled> Ghost </Button> <Button colorScheme="danger" variant="link" disabled> Link </Button> <Button variant="unstyled" disabled> Unstyle </Button> </Wrap>
Add Icon
To add an icon, set a ReactElement to leftIcon or rightIcon.
Editable example
<Wrap gap="md"> <Button colorScheme="primary" variant="solid" leftIcon={<PlusIcon />}> Button </Button> <Button colorScheme="secondary" variant="outline" rightIcon={<ArrowRightIcon />} > Button </Button> <Button colorScheme="warning" variant="ghost" leftIcon={<MailIcon />}> Button </Button> <Button colorScheme="danger" variant="link" leftIcon={<CheckIcon />}> Button </Button> </Wrap>
Use Loading Animation
To use a loading animation, set loading to true. If you want to change the text during loading, use loadingText.
Editable example
<Wrap gap="md"> <Button loading colorScheme="primary"> Button </Button> <Button loading colorScheme="secondary" loadingIcon="dots"> Button </Button> <Button loading colorScheme="warning" variant="outline"> Button </Button> <Button loading colorScheme="danger" variant="ghost"> Button </Button> <Button loading loadingText="Loading..." colorScheme="primary"> Button </Button> <Button loading loadingText="Loading..." loadingPlacement="end" loadingIcon="grid" colorScheme="secondary" variant="outline" > Button </Button> </Wrap>
The loading animation for Button internally uses Loading.
Grouping
To group buttons, use ButtonGroup. ButtonGroup allows you to set variant, size, colorScheme, disabled for child elements (Button) in bulk.
Editable example
<VStack> <ButtonGroup attached variant="outline"> <Button>Button</Button> <IconButton icon={<PlusIcon />} /> </ButtonGroup> <Wrap gap="md"> <ButtonGroup gap="sm"> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> </ButtonGroup> <ButtonGroup attached disabled variant="outline"> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> </ButtonGroup> </Wrap> <Wrap gap="md"> <ButtonGroup direction="column" gap="sm"> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> </ButtonGroup> <ButtonGroup direction="column" attached variant="outline"> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> </ButtonGroup> </Wrap> </VStack>
Edit this page on GitHub