@chakra-ui/button

esm cjs
A React component that is a base button.
Version 2.1.0 License MIT
Keywords
buttonbutton-groupreactchakra-uicomponentclickabletabbable
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 2.1.0
- 2.0.18
- 2.0.17
- 2.0.16
- 2.0.15
- 2.0.14
- 2.0.13
- 2.0.12
- 2.0.11
- 2.0.10
- 2.0.9
- 2.0.8
- 2.0.7
- 2.0.6
- 2.0.5
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.5.10
- 1.5.9
- 1.5.8
- 1.5.7
- 1.5.6
- 1.5.5
- 1.5.4
- 1.5.3
- 1.5.2
- 1.5.1
- 1.5.0
- 1.4.6
- 1.4.5
- 1.4.4
- 1.4.3
- 1.4.2
- 1.4.1
- 1.4.0
- 1.3.2
- 1.3.1
- 1.3.0
- 1.2.2
- 1.2.1
- 1.2.0
- 1.1.4
- 1.1.3
- 1.1.2
- 1.1.0
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- 2.0.0-next.3
- 2.0.0-next.2
- 2.0.0-next.1
- 2.0.0-next.0
- 1.4.2-next.0
- 1.0.0-rc.8
- 1.0.0-rc.7
- 1.0.0-rc.6
- 1.0.0-rc.5
- 1.0.0-rc.4
- 1.0.0-rc.3
- 1.0.0-rc.2
- 1.0.0-rc.1
- 1.0.0-rc.0
- 1.0.0-next.7
- 1.0.0-next.6
- 1.0.0-next.5
- 1.0.0-next.4
- 1.0.0-next.3
- 1.0.0-next.2
- 1.0.0-next.1
- 1.0.0-next.0
- 0.0.0-pr-202215132532
- 0.0.0-pr-202215125733
- 0.0.0-pr-20221512359
- 0.0.0-pr-20221512346
- 0.0.0-pr-202215121320
- 0.0.0-pr-20221512130
- 0.0.0-pr-202215114917
- 0.0.0-pr-202215114422
- 0.0.0-pr-202215113950
- 0.0.0-pr-202215113521
- 0.0.0-pr-202215111823
- 0.0.0-pr-20221462931
- 0.0.0-pr-20221417318
- 0.0.0-pr-202214173148
- 0.0.0-pr-202214173019
- 0.0.0-pr-202214171317
- 0.0.0-pr-20221272450
- 0.0.0-pr-20221272130
- 0.0.0-pr-20221263715
- 0.0.0-pr-20221263638
- 0.0.0-pr-202212011232
- 0.0.0-pr-20221173648
- 0.0.0-pr-20221173228
- 0.0.0-pr-202211713187
- 0.0.0-pr-202211594731
- 0.0.0-pr-20221153122
- 0.0.0-pr-2022114224724
- 0.0.0-pr-202211224227
- 0.0.0-pr-202211224055
- 0.0.0-pr-202209231927
- 0.0.0-pr-202209231818
- 0.0.0-pr-202209231642
- 0.0.0-pr-20220921590
- 0.0.0-pr-202209211330
- 0.0.0-pr-20220920538
- 0.0.0-pr-202209205059
- 0.0.0-pr-202208164521
- 0.0.0-pr-20220816386
- 0.0.0-pr-202208163634
- 0.0.0-pr-2022062070
- 0.0.0-pr-20220620149
- 0.0.0-pr-202206192031
- 0.0.0-pr-202206185910
- 0.0.0-pr-20220483049
- 0.0.0-pr-20220421928
- 0.0.0-pr-202204203645
- 0.0.0-pr-202204174930
- 0.0.0-pr-202204174042
- 0.0.0-pr-202204173424
- 0.0.0-pr-202203231241
- 0.0.0-pr-202203225541
- 0.0.0-pr-20220300344
- 0.0.0-pr-20220284534
- 0.0.0-pr-2022028277
- 0.0.0-pr-20220282356
- 0.0.0-pr-202202618407
- 0.0.0-pr-2022026182926
- 0.0.0-pr-2022026181758
- 0.0.0-pr-20220259146
- 0.0.0-pr-20220258462
- 0.0.0-pr-202202584437
- 0.0.0-pr-20220251866
- 0.0.0-pr-202202495553
- 0.0.0-pr-202202495536
- 0.0.0-pr-202202495259
- 0.0.0-pr-2022024234531
- 0.0.0-pr-202202423375
- 0.0.0-pr-2022024212254
- 0.0.0-pr-202202410034
- 0.0.0-pr-2022020961
- 0.0.0-pr-202202092345
- 0.0.0-pr-20220209192
- 0.0.0-pr-2022017182645
- 0.0.0-pr-2022014183133
- 0.0.0-pr-202201418280
- 0.0.0-pr-2022014102532
- 0.0.0-pr-202201319211
- 0.0.0-pr-2022013192043
- 0.0.0-pr-2022013191659
- 0.0.0-pr-2022013191632
- 0.0.0-pr-2022013191627
- 0.0.0-pr-2022013191557
- 0.0.0-pr-202201319022
- 0.0.0-pr-2022011182024
- 0.0.0-pr-2022011175644
- 0.0.0-pr-202201013538
- 0.0.0-pr-2022010134944
- 0.0.0-pr-202111921327
- 0.0.0-pr-20211191288
- 0.0.0-pr-202111299647
- 0.0.0-pr-202111299618
- 0.0.0-pr-2021112991213
- 0.0.0-pr-2021112822415
- 0.0.0-pr-2021112822349
- 0.0.0-pr-2021112821613
- 0.0.0-pr-20211128215540
- 0.0.0-pr-2021112616030
- 0.0.0-pr-20211126155055
- 0.0.0-pr-20211126154235
- 0.0.0-pr-20211126153854
- 0.0.0-pr-20211126153437
- 0.0.0-pr-20211126151058
- 0.0.0-pr-20211120215645
- 0.0.0-pr-20211120214314
- 0.0.0-pr-20211120213315
- 0.0.0-pr-20211120212927
- 0.0.0-pr-20211120212826
- 0.0.0-pr-20211115103050
- 0.0.0-pr-20211113202333
- 0.0.0-pr-20211113201444
- 0.0.0-pr-2021111320117
- 0.0.0-pr-2021111320052
- 0.0.0-pr-20211113195848
- 0.0.0-next-dev-202241614737
- 0.0.0-dev-20230718132637
- 0.0.0-dev-20230718130742
- 0.0.0-dev-20230718124717
- 0.0.0-dev-20230718122336
- 0.0.0-dev-20230330130626
- 0.0.0-dev-20230330124619
- 0.0.0-dev-20230329144927
- 0.0.0-dev-20230329141708
- 0.0.0-dev-20230329140150
- 0.0.0-dev-20230329123951
- 0.0.0-dev-20230320184810
- 0.0.0-dev-20230320183136
- 0.0.0-dev-20230319202046
- 0.0.0-dev-20230319193708
- 0.0.0-dev-20230319192154
- 0.0.0-dev-20230318183840
- 0.0.0-dev-20230318182221
- 0.0.0-dev-20230318180604
- 0.0.0-dev-20230318173550
- 0.0.0-dev-20230318171948
- 0.0.0-dev-20230318162751
- 0.0.0-dev-20230116124502
- 0.0.0-dev-20230116122157
- 0.0.0-dev-20230116120206
- 0.0.0-dev-20230112154520
- 0.0.0-dev-20230112152756
- 0.0.0-dev-20230112145104
- 0.0.0-dev-20230112143332
- 0.0.0-dev-20230112141201
- 0.0.0-dev-20230112113621
- 0.0.0-dev-20230111211417
- 0.0.0-dev-202268165050
- 0.0.0-dev-202268163535
- 0.0.0-dev-2022669710
- 0.0.0-dev-2022659431
- 0.0.0-dev-2022659325
- 0.0.0-dev-202264144818
- 0.0.0-dev-202261317818
- 0.0.0-dev-202261316456
- 0.0.0-dev-2022612222012
- 0.0.0-dev-2022610103924
- 0.0.0-dev-2022610103716
- 0.0.0-dev-2022587541
- 0.0.0-dev-202257113310
- 0.0.0-dev-202257113227
- 0.0.0-dev-20225619634
- 0.0.0-dev-202256192154
- 0.0.0-dev-202256153840
- 0.0.0-dev-202256151938
- 0.0.0-dev-2022551939
- 0.0.0-dev-202255185818
- 0.0.0-dev-20225517307
- 0.0.0-dev-202255105723
- 0.0.0-dev-2022520164752
- 0.0.0-dev-2022520164715
- 0.0.0-dev-2022520163758
- 0.0.0-dev-2022520143145
- 0.0.0-dev-2022518113258
- 0.0.0-dev-202251616831
- 0.0.0-dev-2022516151633
- 0.0.0-dev-2022516122241
- 0.0.0-dev-2022515163532
- 0.0.0-dev-2022513181240
- 0.0.0-dev-2022511155428
- 0.0.0-dev-2022511155356
- 0.0.0-dev-2022511155212
- 0.0.0-dev-20224248516
- 0.0.0-dev-20224248246
- 0.0.0-dev-202242481651
- 0.0.0-dev-20224239149
- 0.0.0-dev-2022423121615
- 0.0.0-dev-2022423121532
- 0.0.0-dev-2022423113827
- 0.0.0-dev-202242121518
- 0.0.0-dev-2022421153722
- 0.0.0-dev-20224205231
- 0.0.0-dev-2022419174740
- 0.0.0-dev-2022419173934
- 0.0.0-dev-2022419101754
- 0.0.0-dev-202241794553
- 0.0.0-dev-202241784047
- 0.0.0-dev-202241716586
- 0.0.0-dev-202241710959
- 0.0.0-dev-202241710143
- 0.0.0-dev-2022416204849
- 0.0.0-dev-202241614743
- 0.0.0-dev-20223655213
- 0.0.0-dev-202236141416
- 0.0.0-dev-20223614103
- 0.0.0-dev-202236132312
- 0.0.0-dev-202236131344
- 0.0.0-dev-2022349957
- 0.0.0-dev-2022349233
- 0.0.0-dev-20223491859
- 0.0.0-dev-2022349032
- 0.0.0-dev-20223215463
- 0.0.0-dev-2022228155140
- 0.0.0-dev-2022225182931
- 0.0.0-dev-2022215184036
- 0.0.0-dev-2022215183938
- 0.0.0-dev-2022215182043
- 0.0.0-dev-2022215181125
- 0.0.0-dev-202221419595
- 0.0.0-dev-2022214195653
- 0.0.0-dev-2022214195434
- 0.0.0-dev-202221417436
- 0.0.0-dev-202221417325
- 0.0.0-dev-2022214171014
- 0.0.0-dev-20221513279
- 0.0.0-dev-202215122415
- 0.0.0-dev-20221512173
- 0.0.0-dev-202215121428
- 0.0.0-dev-202215121353
- 0.0.0-dev-202215114442
- 0.0.0-dev-202215114149
- 0.0.0-dev-202215112739
- 0.0.0-dev-202215111945
- 0.0.0-dev-20221463045
- 0.0.0-dev-202213175727
- 0.0.0-dev-2022128224832
- 0.0.0-dev-202212822477
- 0.0.0-dev-202212821520
- 0.0.0-dev-2022128215052
- 0.0.0-dev-2022128214753
- 0.0.0-dev-20221223180742
- 0.0.0-dev-202212083710
- 0.0.0-dev-2022120123118
- 0.0.0-dev-202212012129
- 0.0.0-dev-2022120114225
- 0.0.0-dev-2022120114012
- 0.0.0-dev-2022120113958
- 0.0.0-dev-202211720414
- 0.0.0-dev-2022117203714
- 0.0.0-dev-2022117201925
- 0.0.0-dev-2022117131714
- 0.0.0-dev-20221152957
- 0.0.0-dev-20221128185230
- 0.0.0-dev-20221128183433
- 0.0.0-dev-20221128182021
- 0.0.0-dev-20221128164126
- 0.0.0-dev-20221124105520
- 0.0.0-dev-20221124103928
- 0.0.0-dev-20221123130515
- 0.0.0-dev-20221123123308
- 0.0.0-dev-20221122135803
- 0.0.0-dev-20221108124603
- 0.0.0-dev-20221108100218
- 0.0.0-dev-20221108093520
- 0.0.0-dev-20221108090938
- 0.0.0-dev-20221108083411
- 0.0.0-dev-20221108075029
- 0.0.0-dev-20221108073543
- 0.0.0-dev-20221108071844
- 0.0.0-dev-20221107182607
- 0.0.0-dev-20221107181117
- 0.0.0-dev-20221107161407
- 0.0.0-dev-20220929132459
- 0.0.0-dev-20220929105632
- 0.0.0-dev-20220926165450
- 0.0.0-dev-20220926164115
- 0.0.0-dev-20220922115811
- 0.0.0-dev-20220922114557
- 0.0.0-dev-20220921093814
- 0.0.0-dev-20220920121057
- 0.0.0-dev-20220919061024
- 0.0.0-dev-20220916164745
- 0.0.0-dev-20220916144141
- 0.0.0-dev-20220916141616
- 0.0.0-dev-20220916140800
- 0.0.0-dev-20220914105014
- 0.0.0-dev-20220914090509
- 0.0.0-dev-20220912133211
- 0.0.0-dev-20220912132201
- 0.0.0-dev-20220912120959
- 0.0.0-dev-20220824082222
- 0.0.0-dev-20220824080240
- 0.0.0-dev-20220824074122
- 0.0.0-dev-20220823195046
- 0.0.0-dev-20220823192757
- 0.0.0-dev-20220823165602
- 0.0.0-dev-20220823150801
- 0.0.0-dev-20220822184448
- 0.0.0-dev-20220822103611
- 0.0.0-dev-20220822055339
- 0.0.0-dev-20220822054045
- 0.0.0-dev-20220822051456
- 0.0.0-dev-20220820195548
- 0.0.0-dev-20220820193723
- 0.0.0-dev-20220820185458
- 0.0.0-dev-20220820173639
- 0.0.0-dev-20220820172220
- 0.0.0-dev-20220820165925
- 0.0.0-dev-20220820152257
- 0.0.0-dev-20220820124231
- 0.0.0-dev-20220820120308
- 0.0.0-dev-20220819191103
- 0.0.0-dev-20220819143632
- 0.0.0-dev-20220819142048
- 0.0.0-dev-20220819132034
- 0.0.0-dev-20220819125800
- 0.0.0-dev-20220819115812
- 0.0.0-dev-20220819114147
- 0.0.0-dev-20220819092119
- 0.0.0-dev-20220819090547
- 0.0.0-dev-20220818153935
- 0.0.0-dev-20220813083358
- 0.0.0-dev-20220813070741
- 0.0.0-dev-20220813063717
- 0.0.0-dev-20220813055957
- 0.0.0-dev-20220813053727
- 0.0.0-dev-20220813052715
- 0.0.0-dev-20220813051625
- 0.0.0-dev-20220812060931
- 0.0.0-dev-20220811160709
- 0.0.0-dev-20220811093515
- 0.0.0-dev-20220811084042
- 0.0.0-dev-20220810132240
- 0.0.0-dev-20220810124358
- 0.0.0-dev-20220810122556
- 0.0.0-dev-20220810121727
- 0.0.0-dev-20220810112922
- 0.0.0-dev-20220805062318
- 0.0.0-dev-20220804200605
- 0.0.0-dev-20220804194739
- 0.0.0-dev-20220804193815
- 0.0.0-dev-20220804193103
- 0.0.0-dev-20220620653
- 0.0.0-dev-2022028579
- 0.0.0-dev-2022028457
- 0.0.0-dev-2022028387
- 0.0.0-dev-20220282224
- 0.0.0-dev-20220281628
- 0.0.0-dev-2022026182947
- 0.0.0-dev-202202592640
- 0.0.0-dev-202202591937
- 0.0.0-dev-202202591453
- 0.0.0-dev-202202585455
- 0.0.0-dev-20220258486
- 0.0.0-dev-20220258423
- 0.0.0-dev-202202495727
- 0.0.0-dev-202202410017
- 0.0.0-dev-20220209527
- 0.0.0-dev-2022017182859
- 0.0.0-dev-202201418849
- 0.0.0-dev-2022013193526
- 0.0.0-dev-2022013193154
- 0.0.0-dev-202201319130
- 0.0.0-dev-2022013185957
- 0.0.0-dev-20220114728
- 0.0.0-dev-20220114234
- 0.0.0-dev-202201134936
- 0.0.0-dev-202201117413
- 0.0.0-dev-202201013510
- 0.0.0-dev-20211129982
- 0.0.0-dev-202111299720
- 0.0.0-dev-2021112991233
- 0.0.0-dev-20211126154241
- 0.0.0-dev-2021112031622
- 0.0.0-dev-2021112031456
- 0.0.0-dev-2021112024830
- 0.0.0-dev-20211120215621
- 0.0.0-dev-2021111913282
- 0.0.0-dev-20211115103321
- 0.0.0-dev-20211115103018
- 0.0.0-dev-20211115102948
- 0.0.0-canary-2021118164051
- 0.0.0-canary-2021118154929
Button
Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.
Installation
yarn add @chakra-ui/button
# or
npm i @chakra-ui/button
Import component
import { Button } from "@chakra-ui/button"
Usage
<Button colorScheme="green">Button</Button>
Button Sizes
Use the size
prop to change the size of the button. You can set the value to
xs
, sm
, md
, or lg
.
<Stack>
<Button size="xs">Button</Button>
<Button size="sm">Button</Button>
<Button size="md">Button</Button>
<Button size="lg">Button</Button>
</Stack>
Button Variant
Use the variant
prop to change the visual style of the Button. You can set the
value to solid
, ghost
, outline
, or link
.
<ButtonGroup>
<Button variant="solid">Button</Button>
<Button variant="outline">Button</Button>
<Button variant="ghost">Button</Button>
<Button variant="link">Button</Button>
</ButtonGroup>
Button with Icon
You can add left and right icons to the Button components.
<ButtonGroup>
<Button leftIcon={<EmailIcon />} variant="solid">
Email
</Button>
<Button rightIcon={<ArrowForwardIcon />} variant="outline">
Call us
</Button>
</ButtonGroup>
Button loading state
Pass isLoading
prop to the Button component to show its loading state. You can
optionally pass loadingText
prop.
You can also use a custom spinner to render your own spinner component.
<Stack>
<Button isLoading colorScheme="teal" variant="solid">
Email
</Button>
<Button
isLoading
colorScheme="teal"
variant="outline"
spinner={<BarSpinner />}
>
Submit
</Button>
</Stack>