@zendeskgarden/react-buttons NPM

@zendeskgarden/react-buttons

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>;

components garden react zendesk

@zendeskgarden/container-utilities polished prop-types react-merge-refs

@everything-registry/sub-chunk-1072 @appquality/common-button @appquality/unguess-design-system zd_faqs @eteg/react-modals @eteg/react-pickers @infinitebrahmanuniverse/nolb-_zen mat-periodic-table @zalastax/nolb-_zen @zendeskgarden/react-tables @zendeskgarden/react-dropdowns.next @zendeskgarden/react-grid @zendeskgarden/react-modals @zendeskgarden/react-notifications @zendeskgarden/react-colorpickers @zendeskgarden/react-dropdowns @zendeskgarden/react-chrome @zendeskgarden/react-autocomplete

4 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago