Spaces:
Paused
Paused
| <!-- | |
| Licensed to the Apache Software Foundation (ASF) under one | |
| or more contributor license agreements. See the NOTICE file | |
| distributed with this work for additional information | |
| regarding copyright ownership. The ASF licenses this file | |
| to you under the Apache License, Version 2.0 (the | |
| "License"); you may not use this file except in compliance | |
| with the License. You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, | |
| software distributed under the License is distributed on an | |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| KIND, either express or implied. See the License for the | |
| specific language governing permissions and limitations | |
| under the License. | |
| --> | |
| --- | |
| 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: | |
| <StoryExample | |
| component={() => ( | |
| <Button buttonStyle="primary" onClick={() => console.log('Clicked!')}> | |
| Click Me | |
| </Button> | |
| )} | |
| /> | |
| ## Interactive Example | |
| <StoryWithControls | |
| component={({ buttonStyle, buttonSize, label, disabled }) => ( | |
| <Button | |
| buttonStyle={buttonStyle} | |
| buttonSize={buttonSize} | |
| disabled={disabled} | |
| onClick={() => console.log('Clicked!')} | |
| > | |
| {label} | |
| </Button> | |
| )} | |
| 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 ( | |
| <Button buttonStyle="primary" onClick={() => console.log('Button clicked')}> | |
| Click Me | |
| </Button> | |
| ); | |
| } | |
| ``` | |
| ## 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 | |