9.3.94 • Published 7 months ago

@fluentui/react-button v9.3.94

Weekly downloads
1,225
License
MIT
Repository
github
Last release
7 months ago

@fluentui/react-button

Button components for Fluent UI React

  • Buttons enable users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  • CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  • MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close menus.
  • SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary action, while interacting with the second one opens a menu with secondary actions.
  • ToggleButtons are buttons that toggle between two defined states when triggered.

Usage

To import Button:

import { Button, CompoundButton, MenuButton, SplitButton, ToggleButton } from '@fluentui/react-components';

Examples

Button

<Button>Submit</Button>
<Button icon={<SVGIcon />} />
<Button icon={<SVGIcon />}>Submit</Button>
<Button icon={<SVGIcon />} iconPosition="after">Submit</Button>
<Button appearance="primary">Submit</Button>
<Button disabled>Submit</Button>
<Button size="small">Submit</Button>
<Button size="large">Submit</Button>

CompoundButton

<CompoundButton icon={<CalendarMonth />} secondaryContent="Secondary content" {...props}>
  Example
</CompoundButton>

MenuButton

<Menu>
  <MenuTrigger>
    <MenuButton>Example</MenuButton>
  </MenuTrigger>

  <MenuPopover>
    <MenuList>
      <MenuItem>Item a</MenuItem>
      <MenuItem>Item b</MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>

SplitButton

<Menu positioning="below-end">
  <MenuTrigger>
    {(triggerProps: MenuButtonProps) => <SplitButton menuButton={triggerProps}>Example</SplitButton>}
  </MenuTrigger>

  <MenuPopover>
    <MenuList>
      <MenuItem>Item a</MenuItem>
      <MenuItem>Item b</MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>

ToggleButton

<ToggleButton>Toggle volume</ToggleButton>
<ToggleButton defaultChecked={true}>Toggle volume</ToggleButton>
<ToggleButton checked={true}>Toggle volume</ToggleButton>
<ToggleButton checked={false}>Toggle volume</ToggleButton>

See Fluent UI Storybook for more detailed usage examples.

Alternatively, run Storybook locally with:

  1. yarn start
  2. Select react-button from the list.

Specification

See SPEC.md.

Migration Guide

If you're upgrading to Fluent UI v9 see MIGRATION.md for guidance on updating to the latest component implementations.

9.3.94

7 months ago

9.3.93

8 months ago

9.3.92

8 months ago

9.3.91

8 months ago

9.3.90

9 months ago

9.3.89

9 months ago

9.3.88

9 months ago

9.3.83

12 months ago

9.3.82

1 year ago

9.3.87

10 months ago

9.3.86

10 months ago

9.3.85

11 months ago

9.3.84

11 months ago

9.3.81

1 year ago

9.3.80

1 year ago

9.3.79

1 year ago

9.3.78

1 year ago

9.3.77

1 year ago

9.3.76

1 year ago

9.3.75

1 year ago

9.3.74

1 year ago

9.3.73

1 year ago

9.3.72

1 year ago

9.3.71

1 year ago

9.3.70

1 year ago

9.3.69

1 year ago

9.3.68

1 year ago

9.3.67

1 year ago

9.3.66

1 year ago

9.3.65

1 year ago

9.3.64

1 year ago

9.3.63

1 year ago

9.3.62

1 year ago

9.3.61

1 year ago

9.3.60

1 year ago

9.3.59

1 year ago

9.3.58

1 year ago

9.3.25

2 years ago

9.3.24

2 years ago

9.3.23

2 years ago

9.3.22

2 years ago

9.3.29

2 years ago

9.3.28

2 years ago

9.3.27

2 years ago

9.3.26

2 years ago

9.3.21

2 years ago

9.3.36

2 years ago

9.3.35

2 years ago

9.3.34

2 years ago

9.3.33

2 years ago

9.3.39

2 years ago

9.3.38

2 years ago

9.3.37

2 years ago

9.3.32

2 years ago

9.3.31

2 years ago

9.3.30

2 years ago

9.3.47

2 years ago

9.3.46

2 years ago

9.3.45

2 years ago

9.3.44

2 years ago

9.3.49

2 years ago

9.3.48

2 years ago

9.3.43

2 years ago

9.3.41

2 years ago

9.3.40

2 years ago

9.3.57

1 year ago

9.3.56

2 years ago

9.3.55

2 years ago

9.3.50

2 years ago

9.3.54

2 years ago

9.3.53

2 years ago

9.3.52

2 years ago

9.3.51

2 years ago

9.3.20

2 years ago

9.3.19

2 years ago

9.3.18

2 years ago

9.3.17

2 years ago

9.3.14

2 years ago

9.3.13

2 years ago

9.3.12

2 years ago

9.3.11

2 years ago

9.3.16

2 years ago

9.3.15

2 years ago

9.3.10

2 years ago

9.3.7

2 years ago

9.3.6

2 years ago

9.3.5

2 years ago

9.3.4

2 years ago

9.3.3

2 years ago

9.3.2

2 years ago

9.3.1

2 years ago

9.3.0

2 years ago

9.3.9

2 years ago

9.3.8

2 years ago

9.2.5

2 years ago

9.2.4

2 years ago

9.1.15

2 years ago

9.1.16

2 years ago

9.2.3

2 years ago

9.2.2

2 years ago

9.2.1

2 years ago

9.2.0

2 years ago

9.1.13

2 years ago

9.1.14

2 years ago

9.1.10

2 years ago

9.1.11

2 years ago

9.1.12

2 years ago

9.1.9

3 years ago

9.1.8

3 years ago

9.1.7

3 years ago

9.1.6

3 years ago

9.1.5

3 years ago

0.20.16

3 years ago

9.1.4

3 years ago

9.1.3

3 years ago

0.20.15

3 years ago

0.20.13

3 years ago

0.20.14

3 years ago

0.20.12

3 years ago

9.1.2

3 years ago

9.1.1

3 years ago

0.20.9

3 years ago

0.20.8

3 years ago

0.20.7

3 years ago

0.20.6

3 years ago

0.20.5

3 years ago

0.20.4

3 years ago

9.0.0-rc.14

3 years ago

9.0.3

3 years ago

0.0.0

3 years ago

9.0.2

3 years ago

9.0.1

3 years ago

9.0.0

3 years ago

9.1.0

3 years ago

0.20.11

3 years ago

0.20.10

3 years ago

0.20.3

3 years ago

9.0.0-rc.11

3 years ago

9.0.0-rc.10

3 years ago

9.0.0-rc.13

3 years ago

9.0.0-rc.12

3 years ago

9.0.0-rc.8

3 years ago

9.0.0-rc.9

3 years ago

9.0.0-rc.7

3 years ago

9.0.0-rc.6

3 years ago

0.20.2

3 years ago

9.0.0-rc.5

3 years ago

9.0.0-rc.3

3 years ago

9.0.0-rc.4

3 years ago

9.0.0-rc.1

3 years ago

9.0.0-beta.5

3 years ago

9.0.0-beta.4

4 years ago

9.0.0-beta.3

4 years ago

0.20.1

4 years ago

9.0.0-beta.2

4 years ago

9.0.0-beta.1

4 years ago

9.0.0-alpha.100

4 years ago

9.0.0-alpha.101

4 years ago

9.0.0-alpha.99

4 years ago

9.0.0-alpha.97

4 years ago

9.0.0-alpha.95

4 years ago

9.0.0-alpha.96

4 years ago

9.0.0-alpha.94

4 years ago

9.0.0-alpha.93

4 years ago

9.0.0-alpha.92

4 years ago

9.0.0-alpha.91

4 years ago

9.0.0-alpha.89

4 years ago

9.0.0-alpha.90

4 years ago

9.0.0-alpha.88

4 years ago

9.0.0-alpha.86

4 years ago

9.0.0-alpha.87

4 years ago

9.0.0-alpha.85

4 years ago

9.0.0-alpha.84

4 years ago

9.0.0-alpha.83

4 years ago

9.0.0-alpha.82

4 years ago

9.0.0-alpha.81

4 years ago

9.0.0-alpha.79

4 years ago

9.0.0-alpha.80

4 years ago

9.0.0-alpha.78

4 years ago

9.0.0-alpha.76

4 years ago

9.0.0-alpha.77

4 years ago

0.20.0

4 years ago

9.0.0-alpha.75

4 years ago

9.0.0-alpha.74

4 years ago

9.0.0-alpha.73

4 years ago

9.0.0-alpha.72

4 years ago

9.0.0-alpha.71

4 years ago

9.0.0-alpha.70

4 years ago

9.0.0-alpha.69

4 years ago

9.0.0-alpha.68

4 years ago

9.0.0-alpha.67

4 years ago

9.0.0-alpha.66

4 years ago

9.0.0-alpha.65

4 years ago

9.0.0-alpha.64

4 years ago

9.0.0-alpha.62

4 years ago

9.0.0-alpha.63

4 years ago

9.0.0-alpha.61

4 years ago

9.0.0-alpha.60

4 years ago

9.0.0-alpha.59

4 years ago

9.0.0-alpha.58

4 years ago

9.0.0-alpha.57

4 years ago

9.0.0-alpha.56

4 years ago

9.0.0-alpha.55

4 years ago

9.0.0-alpha.53

4 years ago

9.0.0-alpha.54

4 years ago

9.0.0-alpha.52

4 years ago

9.0.0-alpha.51

4 years ago

9.0.0-alpha.50

4 years ago

9.0.0-alpha.49

4 years ago

9.0.0-alpha.48

4 years ago

9.0.0-alpha.46

4 years ago

9.0.0-alpha.47

4 years ago

9.0.0-alpha.44

4 years ago

9.0.0-alpha.45

4 years ago

9.0.0-alpha.42

4 years ago

9.0.0-alpha.43

4 years ago

9.0.0-alpha.41

4 years ago

9.0.0-alpha.39

4 years ago

9.0.0-alpha.37

4 years ago

9.0.0-alpha.38

4 years ago

9.0.0-alpha.35

4 years ago

9.0.0-alpha.36

4 years ago

9.0.0-alpha.33

4 years ago

9.0.0-alpha.34

4 years ago

9.0.0-alpha.40

4 years ago

9.0.0-alpha.28

4 years ago

9.0.0-alpha.29

4 years ago

9.0.0-alpha.26

4 years ago

9.0.0-alpha.27

4 years ago

9.0.0-alpha.25

4 years ago

9.0.0-alpha.31

4 years ago

9.0.0-alpha.32

4 years ago

9.0.0-alpha.30

4 years ago

9.0.0-alpha.24

4 years ago

9.0.0-alpha.23

4 years ago

9.0.0-alpha.22

4 years ago

9.0.0-alpha.21

4 years ago

9.0.0-alpha.20

4 years ago

9.0.0-alpha.19

4 years ago

9.0.0-alpha.17

4 years ago

9.0.0-alpha.18

4 years ago

9.0.0-alpha.16

4 years ago

9.0.0-alpha.15

4 years ago

9.0.0-alpha.14

4 years ago

9.0.0-alpha.13

4 years ago

0.19.8

4 years ago

0.19.7

4 years ago

9.0.0-alpha.12

4 years ago

9.0.0-alpha.11

4 years ago

9.0.0-alpha.10

4 years ago

9.0.0-alpha.9

4 years ago

9.0.0-alpha.8

4 years ago

9.0.0-alpha.7

4 years ago

9.0.0-alpha.6

4 years ago

9.0.0-alpha.5

4 years ago

0.19.6

4 years ago

9.0.0-alpha.4

4 years ago

9.0.0-alpha.3

4 years ago

9.0.0-alpha.2

4 years ago

9.0.0-alpha.1

4 years ago

1.0.0-beta.35

4 years ago

1.0.0-beta.33

4 years ago

1.0.0-beta.34

4 years ago

1.0.0-beta.32

4 years ago

1.0.0-beta.31

4 years ago

0.19.5

4 years ago

1.0.0-beta.30

4 years ago

0.19.4

4 years ago

0.19.3

4 years ago

1.0.0-beta.29

4 years ago

0.19.2

4 years ago

1.0.0-beta.28

4 years ago

1.0.0-beta.27

4 years ago

1.0.0-beta.26

4 years ago

1.0.0-beta.25

4 years ago

1.0.0-beta.24

4 years ago

1.0.0-beta.23

4 years ago

1.0.0-beta.22

4 years ago

1.0.0-beta.21

4 years ago

0.19.1

4 years ago

1.0.0-beta.20

4 years ago

1.0.0-beta.19

4 years ago

1.0.0-beta.18

4 years ago

1.0.0-beta.17

4 years ago

1.0.0-beta.16

4 years ago

1.0.0-beta.15

4 years ago

1.0.0-beta.14

4 years ago

1.0.0-beta.13

5 years ago

0.19.0

5 years ago

1.0.0-beta.12

5 years ago

0.18.0

5 years ago

1.0.0-beta.11

5 years ago

1.0.0-beta.10

5 years ago

1.0.0-beta.9

5 years ago

1.0.0-beta.8

5 years ago

1.0.0-beta.7

5 years ago

1.0.0-beta.6

5 years ago

1.0.0-beta.5

5 years ago

1.0.0-beta.4

5 years ago

1.0.0-beta.3

5 years ago

1.0.0-beta.2

5 years ago

1.0.0-beta.1

5 years ago

1.0.0-beta.0

5 years ago

0.17.2

5 years ago

0.17.1

5 years ago

0.17.0

5 years ago

0.16.0

5 years ago

0.15.2

5 years ago

0.15.1

5 years ago

0.15.0

5 years ago

0.14.8

5 years ago

0.14.7

5 years ago

0.14.6

5 years ago

0.14.5

5 years ago

0.14.4

5 years ago

0.14.3

5 years ago

0.14.2

5 years ago

0.14.1

5 years ago

0.14.0

5 years ago

0.13.4

5 years ago

0.13.3

5 years ago

0.13.0

5 years ago

0.13.1

5 years ago

0.13.2

5 years ago

0.12.6

5 years ago

0.12.5

5 years ago

0.12.4

5 years ago

0.12.3

5 years ago

0.12.0

5 years ago

0.12.1

5 years ago

0.12.2

5 years ago

0.11.6

5 years ago

0.11.5

5 years ago

0.11.4

5 years ago

0.11.3

5 years ago

0.11.2

5 years ago

0.11.1

5 years ago

0.11.0

5 years ago

0.10.4

5 years ago

0.10.3

5 years ago

0.10.2

5 years ago

0.10.1

5 years ago

0.10.0

5 years ago

0.9.4

5 years ago

0.9.3

5 years ago

0.9.2

5 years ago

0.9.1

5 years ago

0.9.0

5 years ago

0.8.1

5 years ago

0.8.0

5 years ago

0.8.2

5 years ago

0.7.17

5 years ago

0.7.16

5 years ago

0.7.15

5 years ago

0.7.14

5 years ago

0.7.13

5 years ago

0.7.12

5 years ago

0.7.11

5 years ago

0.7.10

5 years ago

0.7.9

5 years ago

0.7.8

5 years ago

0.7.7

5 years ago

0.7.6

5 years ago

0.7.5

5 years ago

0.7.4

5 years ago

0.7.3

5 years ago

0.7.2

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.5

5 years ago

0.6.4

5 years ago

0.6.3

5 years ago

0.6.2

5 years ago

0.6.1

5 years ago

0.6.0

5 years ago

0.5.2

5 years ago

0.5.1

5 years ago

0.5.0

5 years ago

0.4.0

5 years ago

0.3.7

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.2

5 years ago

0.3.3

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.13

5 years ago

0.1.12

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.9

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago