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
- Name9.0.0-next.26•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 |