Buttons
ShapeButton
Storybook
ShapeButton
Storybook
The ShapeButton component is a button that can be customized with different variants and optionally with a custom icon.
Imports
1import { ShapeButton } from 'dd360-ds'1import { ShapeButton } from 'dd360-ds/Buttons'1import ShapeButton from 'dd360-ds/ShapeButton'Usage
BaseCircleButton
To use the BaseCircleButton follow this example:
1import { ShapeButton } from 'dd360-ds'
2
3<ShapeButton.BaseCircleButton />Variants BaseCircleButton
The prop variant can only be used with the BaseCircleButton, it has 2 variants: "square" and "circle". By default it is "circle".
Square
Circle
1import { ShapeButton } from "dd360-ds"
2
3<ShapeButton.BaseCircleButton variant="square" />
4<ShapeButton.BaseCircleButton variant="circle" />Square Button
To use the SquareButton follow this example:
1import { ShapeButton } from 'dd360-ds'
2
3<ShapeButton.SquareButton />Circle Button
To use the CircleButton follow this example:
1import { ShapeButton } from 'dd360-ds'
2
3<ShapeButton.CircleButton />ShapeButton with custom icon
In addition, you can customize the buttons using custom icons:
1import { ShapeButton } from 'dd360-ds'
2import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
3
4<ShapeButton.BaseCircleButton
5 icon={
6 <DynamicHeroIcon
7 icon='AcademicCapIcon'
8 className='text-blue-700 w-6'
9 />
10 }
11/>API Reference
| Name | Types | Default |
|---|---|---|
| "height" | string | 3rem |
| "icon" | ReactNode | - |
| "disabled" | boolean | false |
| "onClick" | function | - |
| "variant (BaseCircleButton exclusive prop)" | square circle | circle |