Description of icon
Flex UI
API Reference

MainHeader

This is a container for MainHeader. Can be themed with Theme.MainHeader in Theme.


Component children#

KeyComponentConditionAlignDescription
sidenav-buttonstyled(div)
start
A wrapper that displays the main header menu button
logostyled(img)
Visible only when logoUrl is provided as prop.
start
Container for the main header logo
logoimg
Visible only when logoUrl is not provided as prop.
start
Default Header logo if logoUrl is not provided as prop
errorui-buttonReact component
end
A wrapper that displays the errors thrown in the current session
dialpad-buttonReact component
Visible when outbound calling is enabled
end
A button that opens the Dialpad when clicked
user-controlsReact component
end
A wrapper that displays the user controls
activityReact component
end
A dropdown component that enables the user to change their activity status
device-managerReact component
end
A menu component that enables the user to select input/output audio device
locale-selectorReact component
end
A dropdown component that enables the user to select language of Flex

Static Properties#

NameTypeDescription
ContentDynamicContentStore<MainHeader.MainHeaderChildrenProps, MainHeaderChildrenKeys>

Dynamic content store

defaultPropsMainHeader.MainHeaderProps

Default properties

Component Properties#

NameTypeDescriptionOptionalDefault
logoUrlstring

Logo URL shown in the main header.

Yes
logoAltTextstring

Logo alt text shown in the main header.

Yes
BadgeComponentBadgeProps<MainHeaderProps>

Set of properties for internal Badge element.

Yes
Badge.childrennumber | function

Children of internal Badge component.

Yes
isSideNavOpenboolean

Whether the Sidebar is open or not.

Yes
isOutboundDialerOpenboolean

Whether the Outbound dialer is open or not.

Yes
childrenDynamicContentStore.DynamicComponentChildren<MainHeaderChildrenProps>

children

Yes

Component Children Properties#

NameTypeDescriptionOptionalDefault
incomingTasksboolean

Deprecated - Whether there are any incoming tasks or not.

Yes
isLiveVoiceCallboolean

Whether there is a live voice call.

Yes
isLiveVoiceConnectionboolean

Deprecated: use isLiveVoiceCall.

Yes
BadgeBadge.BadgeProps

Set of properties for internal Badge element.

Yes
logoUrlstring

Logo URL shown in the main header.

Yes
logoAltTextstring

Logo alt text shown in the main header.

Yes
BadgeComponentBadgeProps<MainHeaderProps>

Set of properties for internal Badge element.

Yes
Badge.childrennumber | function

Children of internal Badge component.

Yes
isSideNavOpenboolean

Whether the Sidebar is open or not.

Yes
isOutboundDialerOpenboolean

Whether the Outbound dialer is open or not.

Yes
childrenDynamicContentStore.DynamicComponentChildren<MainHeaderChildrenProps>

children

Yes
Rate this page

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.