Skip to main content

DyteControlbarButton

A skeleton component used for composing buttons.

<Center>
  <DyteControlbarButton
    label="Flight Mode"
    icon={airplaneSVG}
    onClick={() => alert('Flight mode toggled')}
    size="sm"
  />
  <DyteControlbarButton
    label="Flight Mode"
    icon={airplaneSVG}
    onClick={() => alert('Flight mode toggled')}
    size="lg"
  />
  <DyteControlbarButton
    label="Flight Mode"
    icon={airplaneSVG}
    onClick={() => alert('Flight mode toggled')}
    variant="horizontal"
    size="sm"
  />
</Center>

Props​

brandIcon

Whether icon requires brand color

Default
false
Type
boolean

disabled

Whether button is disabled

Default
false
Type
boolean

icon

Icon

Type
string

iconPack

Icon pack

Default
defaultIconPack

isLoading

Loading state Ignores current icon and shows a spinner if true

Type
boolean

label

Label of button

Type
string

showWarning

Whether to show warning icon

Default
false
Type
boolean

size

Size

Type
"lg" | "md" | "sm" | "xl"

t

Language

Default
useLanguage()

variant

Variant

Default
'button'
Type
"button" | "horizontal"