Button elements in various variants.
The button element has 7 variants.
1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button>
4 Default
5</Button>1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button variant='success'>
4 Success
5</Button>1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button variant='info'>
4 Info
5</Button>1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button variant='warning'>
4 Warning
5</Button>1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button variant='danger'>
4 Danger
5</Button>1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button variant='special'>
4 Special
5</Button>1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button variant='contrast'>
4 Contrast
5</Button>1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button variant='contrastghost'>
4 Contrast Ghost
5</Button>The disabled button variant is an option available in all variants, to be used when, for example, a user needs to fill out a form before submitting. The button becomes transparent and pointer-events are disabled.
1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button variant='info' isDisabled>
4 Info (disabled)
5</ButtonInfo>The sizes tiny, small, large and extra large are available in all variants.
1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button isTiny>
4 Button
5</Button>1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button isSmall>
4 Button
5</Button>1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button isLarge>
4 Button
5</Button>1import { Button } from '@tempoplatform/tpds/elements/buttons'
2
3<Button isExtraLarge>
4 Button
5</Button>