Button
Buttons let users take action quickly. Use a Button to enable actions or decisions that are important to a user’s workflow.
- To enable user action
- To draw attention to relevant actions in a user’s workflow
- To navigate to another page, use Anchor instead
- To help users choose from parallel actions, use Split button instead
How to use it
Default
The typical usage of a Button component.
Danger
Use danger styling for Buttons that enable destructive action.
Disabled
A disabled Button prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not read aloud by a screenreader.
Media
Media elements add even more context to a button.
Size
Buttons come in small, medium, and large. The default size is medium.
Stretched
Buttons can stretch to fill the width of their container.
Type
There are 3 types of Buttons: default, primary, and basic.
Configuration
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-buttons
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Button } from '@zendeskgarden/react-buttons'
API
The Button component follows this structure:
<Button><Button.StartIcon /> {/* optional */}{/* button text */}<Button.EndIcon /> {/* optional */}</Button>
Button
Extends ButtonHTMLAttributes<HTMLButtonElement>
The Button component applies appropriate styles based on its usage and the props provided.
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | – | Applies inset box-shadow styling on focus |
isBasic | boolean | – | Applies basic button styling |
isDanger | boolean | – | Applies danger styling |
isLink | boolean | – | Applies link (anchor) button styling |
isNeutral | boolean | – | Applies neutral button styling |
isPill | boolean | – | Applies pill button styling |
isPrimary | boolean | – | Applies primary button styling |
isStretched | boolean | – | Stretches the button fill to its container width |
size | 'small' | 'medium' | 'large' | 'medium' | Specifies the button size |
Button.EndIcon
Extends SVGAttributes<SVGElement>
The EndIcon component appropriately positions its child icon within the button. Nest it within the Button component as the last child. See media example.
| Prop name | Type | Default | Description |
|---|---|---|---|
isRotated | boolean | – | Rotates icon 180 degrees |
Button.StartIcon
Extends SVGAttributes<SVGElement>
The StartIcon component appropriately positions its child icon within the button. Nest it within the Button component as the first child. See media example.
| Prop name | Type | Default | Description |
|---|---|---|---|
isRotated | boolean | – | Rotates icon 180 degrees |