The button element has 7 variants.
1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button>
4 Default
5</Button>1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button variant='secondary'>
4 Secondary
5</Button>1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button variant='success'>
4 Success
5</Button>1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button variant='info'>
4 Info
5</Button>1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button variant='warning'>
4 Warning
5</Button>1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button variant='danger'>
4 Danger
5</Button>1// USE THIS VARIANT ONLY ON DARK MODE
2
3import { Button } from '@hummingbot/hbui/elements/buttons'
4
5<Button variant='terminal'>
6 Danger
7</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 '@hummingbot/hbui/elements/buttons'
2
3<Button isDisabled>
4 Regular (disabled)
5</Button>1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button variant='secondary' isDisabled>
4 Secondary (disabled)
5</ButtonSecondary>1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button variant='success' isDisabled>
4 Success (disabled)
5</ButtonSuccess>1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button variant='info' isDisabled>
4 Info (disabled)
5</ButtonInfo>1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button variant='warning' isDisabled>
4 Warning (disabled)
5</ButtonWarning>1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button variant='danger' isDisabled>
4 Danger (disabled)
5</ButtonDanger>The small and large are options available in all variants.
1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button isSmall>
4 Text label
5</Button>1import { Button } from '@hummingbot/hbui/elements/buttons'
2
3<Button isLarge>
4 Text label
5</Button>