--- title: Button Component sidebar_position: 1 --- import { StoryExample, StoryWithControls } from '../../src/components/StorybookWrapper'; import { Button } from '../../../superset-frontend/packages/superset-ui-core/src/components/Button'; # Button Component The Button component is a fundamental UI element used throughout Superset for user interactions. ## Basic Usage The default button with primary styling: ( console.log('Clicked!')}> Click Me )} /> ## Interactive Example ( console.log('Clicked!')} > {label} )} props={{ buttonStyle: 'primary', buttonSize: 'default', label: 'Click Me', disabled: false }} controls={[ { name: 'buttonStyle', label: 'Button Style', type: 'select', options: ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'default', 'link', 'dashed'] }, { name: 'buttonSize', label: 'Button Size', type: 'select', options: ['default', 'small', 'xsmall'] }, { name: 'label', label: 'Button Text', type: 'text' }, { name: 'disabled', label: 'Disabled', type: 'boolean' } ]} /> ## Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `buttonStyle` | `'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'danger' \| 'default' \| 'link' \| 'dashed'` | `'default'` | Button style | | `buttonSize` | `'default' \| 'small' \| 'xsmall'` | `'default'` | Button size | | `disabled` | `boolean` | `false` | Whether the button is disabled | | `cta` | `boolean` | `false` | Whether the button is a call-to-action button | | `tooltip` | `ReactNode` | - | Tooltip content | | `placement` | `TooltipProps['placement']` | - | Tooltip placement | | `onClick` | `function` | - | Callback when button is clicked | | `href` | `string` | - | Turns button into an anchor link | | `target` | `string` | - | Target attribute for anchor links | ## Usage ```jsx import Button from 'src/components/Button'; function MyComponent() { return ( console.log('Button clicked')} > Click Me ); } ``` ## Button Styles Superset provides a variety of button styles for different purposes: - **Primary**: Used for primary actions - **Secondary**: Used for secondary actions - **Tertiary**: Used for less important actions - **Success**: Used for successful or confirming actions - **Warning**: Used for actions that require caution - **Danger**: Used for destructive actions - **Link**: Used for navigation - **Dashed**: Used for adding new items or features ## Button Sizes Buttons come in three sizes: - **Default**: Standard size for most use cases - **Small**: Compact size for tight spaces - **XSmall**: Extra small size for very limited spaces ## Best Practices - Use primary buttons for the main action in a form or page - Use secondary buttons for alternative actions - Use danger buttons for destructive actions - Limit the number of primary buttons on a page to avoid confusion - Use consistent button styles throughout your application - Add tooltips to buttons when their purpose might not be immediately clear