Buttons

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	-
"variant (BaseCircleButton exclusive prop)"	square circle	circle

Button GroupRadio