Button component - to be used together with icons
Button with loading state
1import { Button } from '@tempoplatform/tpds/components/buttons'
2
3<Button
4 variant='secondary'
5 loading={true}
6 label="Loading..."
7/>Button with dark-mode ready icon (before)
1import { Button } from '@tempoplatform/tpds/components/buttons'
2import Play from '@tempoplatform/tpds/svgs/16x16/Play'
3
4<Button
5 label="Button"
6 iconBefore={<Play className='fill-current />}
7/>Button with dark-mode ready icon (after)
1import { Button } from '@tempoplatform/tpds/components/buttons'
2import Play from '@tempoplatform/tpds/svgs/16x16/Play'
3
4<Button
5 variant='secondary'
6 label="Button"
7 iconAfter={<Play className='fill-current />}
8/>Button with dark-mode ready icon (before and after)
1import { Button } from '@tempoplatform/tpds/components/buttons'
2import Play from '@tempoplatform/tpds/svgs/16x16/Play'
3import MenuDropdown from '@tempoplatform/tpds/components/menudropdown'
4
5<Button
6 variant='secondary'
7 label="Button"
8 iconBefore={<Play className='fill-current />}
9 iconAfter={<MenuDropdown />}
10/>Button only with icon (no label)
1import { Button } from '@tempoplatform/tpds/components/buttons'
2import Play from '@tempoplatform/tpds/svgs/16x16/Play'
3import MenuDropdown from '@tempoplatform/tpds/components/menudropdown'
4
5<Button
6 variant='secondary'
7 label="Button"
8 iconBefore={<Play className='fill-current />}
9 iconAfter={<MenuDropdown />}
10/>Prop Name
Type
Default
Required
Description
label
String
' '
required
The label of the button.
variant
String
default
optional
The variant identifies the type of the Button (success, info, danger etc.)
iconBefore
SVG JSX
null
optional
Optional icon to show before the label
iconAfter
SVG JSX
null
optional
Optional icon to show after the label