9.5.2 • Published 8 months ago

@zendeskgarden/react-buttons v9.5.2

Weekly downloads
14,081
License
Apache-2.0
Repository
-
Last release
8 months ago

@zendeskgarden/react-buttons npm version

This package includes components relating to buttons in the Garden Design System.

Installation

npm install @zendeskgarden/react-buttons

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

Button

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-buttons';

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <>
    <Button onClick={() => alert('clicked')}>Default</Button>
    <Button isPrimary isDanger>
      Primary danger button
    </Button>
  </>
</ThemeProvider>;

Media button

import React, { useState } from 'react';
import { Button } from '@zendeskgarden/react-buttons';
import StartIcon from '@zendeskgarden/icons/src/16/shield-stroke.svg';
import EndIcon from '@zendeskgarden/icons/src/16/chevron-down-stroke.svg';

const MediaButton = ({ children, ...props }) => {
  const [isRotated, setRotated] = useState(false);

  return (
    <Button onClick={() => setRotated(!isRotated)} {...props}>
      <Button.StartIcon>
        <StartIcon />
      </Button.StartIcon>
      {children}
      <Button.EndIcon isRotated={isRotated}>
        <EndIcon />
      </Button.EndIcon>
    </Button>
  );
};

Button group

import React, { useState } from 'react';
import { ButtonGroup, Button } from '@zendeskgarden/react-buttons';

const MyButtonGroup = ({ children, initialItem, ...props }) => {
  const [selectedItem, setSelectedItem] = useState(initialItem);

  return (
    <ButtonGroup
      selectedItem={selectedItem}
      onSelect={selectedItem => setSelectedItem(selectedItem)}
      {...props}
    >
      {children}
    </ButtonGroup>
  );
};

<MyButtonGroup initialKey="item-1">
  <Button key="item-1">Item 1</Button>
  <Button key="item-2">Item 2</Button>
  <Button key="item-3">Item 3</Button>
</MyButtonGroup>;
9.5.2

8 months ago

9.5.1

8 months ago

9.5.0

9 months ago

9.4.0

10 months ago

8.76.9

10 months ago

9.3.0

10 months ago

9.2.0

10 months ago

9.1.2

11 months ago

9.1.1

11 months ago

9.1.0

11 months ago

9.0.0

12 months ago

8.76.8

12 months ago

9.0.0-next.27

12 months ago

9.0.0-next.25

1 year ago

9.0.0-next.26

1 year ago

9.0.0-next.24

1 year ago

8.76.7

1 year ago

9.0.0-next.23

1 year ago

8.76.6

1 year ago

9.0.0-next.22

1 year ago

9.0.0-next.21

1 year ago

8.76.5

1 year ago

9.0.0-next.20

1 year ago

9.0.0-next.19

1 year ago

9.0.0-next.18

1 year ago

9.0.0-next.16

1 year ago

9.0.0-next.17

1 year ago

9.0.0-next.14

1 year ago

9.0.0-next.15

1 year ago

8.76.4

1 year ago

9.0.0-next.13

1 year ago

8.76.3

1 year ago

9.0.0-next.12

1 year ago

9.0.0-next.11

1 year ago

9.0.0-next.10

1 year ago

8.76.2

1 year ago

9.0.0-next.9

1 year ago

8.76.1

1 year ago

9.0.0-next.8

1 year ago

8.76.0

1 year ago

9.0.0-next.7

1 year ago

8.75.1

1 year ago

9.0.0-next.6

1 year ago

8.75.0

1 year ago

9.0.0-next.5

2 years ago

8.74.3

2 years ago

9.0.0-next.4

2 years ago

9.0.0-next.3

2 years ago

9.0.0-next.2

2 years ago

8.74.2

2 years ago

8.74.1

2 years ago

9.0.0-next.1

2 years ago

9.0.0-next.0

2 years ago

8.74.0

2 years ago

8.73.4

2 years ago

8.69.9

2 years ago

8.69.7

2 years ago

8.69.8

2 years ago

8.69.5

2 years ago

8.69.6

2 years ago

8.72.0

2 years ago

8.73.2

2 years ago

8.73.3

2 years ago

8.73.0

2 years ago

8.73.1

2 years ago

8.69.3

2 years ago

8.69.4

2 years ago

8.69.1

2 years ago

8.69.2

2 years ago

8.70.1

2 years ago

8.70.0

2 years ago

8.71.0

2 years ago

8.69.10

2 years ago

8.69.11

2 years ago

8.68.0

2 years ago

8.69.0

2 years ago

8.67.0

2 years ago

8.64.0

2 years ago

8.65.0

2 years ago

8.66.0

2 years ago

8.57.1

3 years ago

8.57.0

3 years ago

8.60.0

3 years ago

8.58.0

3 years ago

8.50.1

3 years ago

8.50.0

3 years ago

8.61.0

3 years ago

8.59.1

3 years ago

8.59.0

3 years ago

8.51.0

3 years ago

8.62.2

3 years ago

8.62.1

3 years ago

8.62.0

3 years ago

8.49.4

3 years ago

8.49.3

3 years ago

8.52.0

3 years ago

8.63.2

3 years ago

8.63.1

3 years ago

8.63.0

3 years ago

8.53.3

3 years ago

8.53.2

3 years ago

8.53.1

3 years ago

8.53.0

3 years ago

8.49.2

3 years ago

8.49.1

4 years ago

8.54.3

3 years ago

8.54.2

3 years ago

8.54.1

3 years ago

8.54.0

3 years ago

8.55.0

3 years ago

8.56.0

3 years ago

8.49.0

4 years ago

8.45.0

4 years ago

8.46.0

4 years ago

8.47.2

4 years ago

8.47.1

4 years ago

8.47.0

4 years ago

8.48.2

4 years ago

8.48.1

4 years ago

8.48.0

4 years ago

8.44.2

4 years ago

8.44.1

4 years ago

8.44.0

4 years ago

8.43.0

4 years ago

8.42.2

4 years ago

8.42.1

4 years ago

8.42.0

4 years ago

8.41.0

4 years ago

8.40.1

4 years ago

8.40.0

4 years ago

8.39.1

4 years ago

8.39.0

4 years ago

8.38.0

4 years ago

8.36.2

4 years ago

8.37.0

4 years ago

8.37.1

4 years ago

8.36.0

4 years ago

8.36.1

4 years ago

8.35.0

5 years ago

8.34.0

5 years ago

8.33.0

5 years ago

8.32.2

5 years ago

8.32.1

5 years ago

8.32.0

5 years ago

8.31.1

5 years ago

8.31.0

5 years ago

8.30.0

5 years ago

8.29.3

5 years ago

8.29.2

5 years ago

8.29.1

5 years ago

8.29.0

5 years ago

8.28.2

5 years ago

8.28.1

5 years ago

8.28.0

5 years ago

8.27.0

5 years ago

8.26.0

5 years ago

8.25.2

5 years ago

8.25.1

5 years ago

8.25.0

5 years ago

8.24.2

5 years ago

8.24.1

5 years ago

8.24.0

5 years ago

8.23.0

5 years ago

8.23.1

5 years ago

8.22.0

5 years ago

8.21.2

5 years ago

8.21.1

5 years ago

8.21.0

5 years ago

8.20.0

5 years ago

8.19.0

5 years ago

8.18.0

5 years ago

8.17.1

5 years ago

8.17.0

5 years ago

8.16.0

5 years ago

8.15.1

5 years ago

8.15.0

5 years ago

8.14.1

5 years ago

8.14.0

5 years ago

8.13.0

5 years ago

8.12.0

5 years ago

8.11.0

5 years ago

8.10.0

5 years ago

8.9.0

5 years ago

8.8.0

5 years ago

8.7.0

5 years ago

8.6.0

5 years ago

8.5.0

5 years ago

8.4.1

5 years ago

8.4.0

6 years ago

8.3.0

6 years ago

8.2.0

6 years ago

8.1.1

6 years ago

8.0.1

6 years ago

7.1.10

6 years ago

8.0.0

6 years ago

7.1.9

6 years ago

8.0.1-next.0

6 years ago

7.1.5

6 years ago

8.0.0-next.0

6 years ago

7.1.4

6 years ago

6.9.2

6 years ago

7.1.2

6 years ago

7.1.0

6 years ago

7.0.2

6 years ago

6.9.1

6 years ago

7.0.1

6 years ago

7.0.0

6 years ago

6.9.0

6 years ago

6.7.1

6 years ago

6.7.0

6 years ago

6.5.0

6 years ago

6.4.4

6 years ago

6.3.1

6 years ago

6.2.0

6 years ago

6.0.2

6 years ago

6.0.1

6 years ago

6.0.0

6 years ago

3.9.10

6 years ago

3.9.9

6 years ago

3.9.8

6 years ago

3.9.7

6 years ago

3.9.6

6 years ago

3.9.5

6 years ago

3.9.4

6 years ago

3.9.3

6 years ago

3.9.2

6 years ago

3.9.1

7 years ago

3.9.0

7 years ago

3.8.3

7 years ago

3.8.2

7 years ago

3.8.1

7 years ago

3.8.0

7 years ago

3.7.0

7 years ago

3.6.14

7 years ago

3.6.13

7 years ago

3.6.12

7 years ago

3.6.11

7 years ago

3.6.10

7 years ago

3.6.9

7 years ago

3.6.8

7 years ago

3.6.7

7 years ago

3.6.6

7 years ago

3.6.5

7 years ago

3.6.4

7 years ago

3.6.3

7 years ago

3.6.2

7 years ago

3.6.1

7 years ago

3.6.0

7 years ago

3.5.1

7 years ago

3.5.0

7 years ago

3.4.5

7 years ago

3.4.3

7 years ago

3.4.2

7 years ago

3.4.1

7 years ago

3.4.0

7 years ago

3.3.10

7 years ago

3.3.9

7 years ago

3.3.8

7 years ago

3.3.7

7 years ago

3.3.6

7 years ago

3.3.5

7 years ago

3.3.4

7 years ago

3.3.3

7 years ago

3.3.2

7 years ago

3.3.1

7 years ago

3.3.0

7 years ago

3.2.5

7 years ago

3.2.4

7 years ago

3.2.3

7 years ago

3.2.1

7 years ago

3.2.0

7 years ago

3.1.0

7 years ago

3.0.3

7 years ago

3.0.2

7 years ago

3.0.1

7 years ago

3.0.0

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.0.0

7 years ago