Buttons
Button
Storybook
Button
Storybook
button indicates a distinct action and executes a function. Text, icon, or a combination of the two express the action and are supported by the variant and occasionally a tooltip.
Imports
1import { Button } from 'dd360-ds' 1import { Button } from 'dd360-ds/Buttons'1import Button from 'dd360-ds/Button'Usage
1import { Button } from 'dd360-ds'
2
3<Button>Click me</Button>Variants
The Button component comes with several variant options, by default it uses the "primary" variant, but you can also use these: "disabled", "success", "primary", "secondary", "link", "ghost", "cancel", "danger", "outline", "outlineBlue", "outlineWhite", "outlineWhiteRed".
1import { Button, ButtonGroup } from 'dd360-ds'
2
3<ButtonGroup orientation='horizontal' gap={10} align='center'>
4 <Button variant='primary'>Primary</Button>
5 <Button variant='secondary'>Secondary</Button>
6 <Button variant='success'>Success</Button>
7 <Button variant='disabled'>Disabled</Button>
8 <Button variant='danger'>Danger</Button>
9 <Button variant='cancel'>Cancel</Button>
10 <Button variant='ghost'>Ghost</Button>
11 <Button variant='link'>Link</Button>
12 <Button variant='outline'>Outline</Button>
13 <Button variant='outlineBlue'>OutlineBlue</Button>
14 <Button variant='outlineWhite'>OutlineWhite</Button>
15 <Button variant='outlineWhiteRed'>OutlineWhiteRed</Button>
16</ButtonGroup>Loading
To display the loading status, use the property isLoading.
1import { Button } from 'dd360-ds'
2
3<Button isLoading>Click me</Button>Disabled
To disable a button, use the property disabled.
1import { Button } from 'dd360-ds'
2
3<Button disabled>Click me</Button>Sizes
Use the size property to change the size of the button. You can set the value to small, medium, large, or extraLarge.
1import { Button, ButtonGroup } from 'dd360-ds'
2
3<ButtonGroup orientation='horizontal' gap={10}>
4 <Button size='small'>Small</Button>
5 <Button size='medium'>Medium</Button>
6 <Button size='large'>Large</Button>
7 <Button size='extraLarge'>ExtraLarge</Button>
8</ButtonGroup>API Reference
| Name | Types | Default |
|---|---|---|
| "variant" | disabled success primary secondary link ghost cancel danger outline outlineBlue outlineWhite outlineWhiteRed | primary |
| "disabled" | boolean | false |
| "isLoading" | boolean | false |
| "size" | small medium large extraLarge | medium |
| "padding" | string number | - |
| "paddingX" | string number | - |
| "paddingY" | string number | - |
| "rounded" | string number | - |
| "className" | string | - |
| "role" | string | - |
| "renderLoading" | object | - |
| "..." | ButtonHTMLAttributes | - |