Description of icon
Flex UI
API Reference

Theme

Theme options. Material UI theme options are also valid - See Material UI theme customisations for more info.

Properties:

  • RuntimeLoginView: object

    Theme properties for RuntimeLoginView component

    • Container: CSSProps - CSS properties for the RuntimeLoginView container
    • LoginButton: CSSProps - CSS properties for the login button on the login form
  • LoginFormView: object

    Theme properties for the login form

    • Container: CSSProps - CSS properties for the login form wrapper
    • LoginButton: CSSProps - CSS properties for the LoginButton
  • RootContainer: CSSProps

    CSS properties for the upmost application wrapper

  • AgentDesktopView: object

    Theme properties for the AgentDesktopView component

    • Panel1: CSSProps - CSS properties for the panel containing the task list and task detail
    • Panel2: CSSProps - CSS properties for the panel containing the CRM view
    • ContentSplitter: CSSProps - CSS properties for the component splitter, the element that, once dragged, resizes the view
  • MainHeader: object

    Theme properties for the MainHeader component, the banner at the top of the UI

    • Container: CSSProps - CSS properties for the header wrapper element
    • Button: Theme.ButtonThemeProps - Style Properties for the MUI buttons used in header like "Toggle Side nav", "Toggle mute", "Toggle dialpad sidebar"
      • disabledColor?: string - Use the disabled color
      • lightHover?: boolean - Use the light hover effect
  • MainContainer: CSSProps

    CSS properties for the element wrapping sideNav and views

  • SideNav: object

    Theme properties for the sidebar elements

    • Container: CSSProps - CSS properties for the sidebar wrapper
    • Button: Theme.ButtonThemeProps - Style properties for the sidebar buttons
      • disabledColor?: string - Use the disabled color
      • lightHover?: boolean - Use the light hover effect
    • Icon: Theme.ButtonThemeProps - Style properties for the sidebar icons
      • disabledColor?: string - Use the disabled color
      • lightHover?: boolean - Use the light hover effect
  • TaskCanvas: Theme.TaskCanvasThemeProps

    Style Properties for the component that renders the task canvas.

    • Container: CSSProps - Styles task canvas container.
  • TaskCanvasHeader: object

    Theme properties for the TaskCanvasHeader component

    • Container: CSSProps - CSS properties for the TaskCanvasHeader container
    • EndTaskButton: Theme.ButtonThemeProps - Style properties for the end task button
      • disabledColor?: string - Use the disabled color
      • lightHover?: boolean - Use the light hover effect
    • WrapupTaskButton: Theme.ButtonThemeProps - Style properties for the wrap up task button
      • disabledColor?: string - Use the disabled color
      • lightHover?: boolean - Use the light hover effect
  • IncomingTaskCanvas: Theme.IncomingTaskCanvasThemeProps

    Style Properties for the IncomingTaskCanvas

    • AcceptTaskButton: CSSProps - Styles accept task button.
    • RejectTaskButton: CSSProps - Styles reject task button.
  • ConnectingOutboundCallCanvas: Theme.ConnectingOutboundCallCanvasThemeProps

    Style Properties for the outbound call canvas

    • CancelCallButton: CSSProps - Styles cancel call button.
  • CallCanvas: object

    Theme properties for the CallCanvas component

    • Button: CSSProps - CSS properties for all the buttons on the call canvas
    • HangUpButton: CSSProps - CSS properties for the hang up call button
  • TaskInfoPanel: Theme.TaskInfoPanelThemeProps

    Style properties for the task info panel

    • Container: CSSProps - Styles task info panel container.
  • TaskDetailsPanel: Theme.TaskDetailsPanelThemeProps

    Style properties for the task details panel

    • Container: CSSProps - Styles task details panel container.
    • IconContainer: CSSProps - Styles icon container in task details panel.
    • SecondLine: CSSProps - Styles second line container in task details panel.
  • TaskList: object

    Theme properties for the TaskList component

    • Filter: object - Theme properties for the task list filter component
      • Container: CSSProps - CSS properties for the filter wrapper component
      • EntryButton: CSSProps - CSS properties for the filter entry button
      • Menu: object - Theme properties for the filter menu
        • Items: CSSProps - CSS properties for menu items
        • Item: CSSProps - CSS properties for menu item
    • Item: object - Theme properties for the TaskList items
      • Container: CSSProps - CSS properties for all item containers
      • SelectedContainer: CSSProps - CSS properties for the selected item container
      • Icon: CSSProps - CSS properties for all icons
      • SelectedIcon: CSSProps - CSS properties for selected icon
      • Buttons: object - Theme properties for the Item buttons
        • DefaultButton: CSSProps - CSS properties for the default button
        • AcceptButton: CSSProps - CSS properties for the accept button
        • RejectButton: CSSProps - CSS properties for the reject button
  • TaskCard: object

    Theme properties for the TaskCard component

    • Container: object - Theme properties for the wrapper component
      • Default: CSSProps - CSS properties for the wrapper component
      • Selected: CSSProps - CSS properties for when the wrapper is selected
      • Hover: CSSProps - CSS properties for when the wrapper is hovered on
    • IconArea: object - Theme properties for the task card icon
      • Default: CSSProps - CSS properties for the task card icon
    • ContentArea: object - Theme properties for the TaskCard content
      • Default: CSSProps - CSS properties for the content
      • Inactive: CSSProps - CSS properties for when the content area is inactive
  • TaskCardPlaceholder: CSSProps

    CSS properties for placeholder component when there are no tasks to display

  • NoTasksCanvas: Theme.NoTasksCanvasThemeProps

    Style properties for the NoTasksCanvas component

    • Container: CSSProps - Styles container.
    • Hint: CSSProps - Styles hint text container.
  • CRMContainer: object

    Theme properties for the CRMContainer

    • Container: CSSProps - CSS properties for the wrapper component
    • Placeholder: object - Theme properties for the placeholder component
      • Container: CSSProps - CSS properties for the wrapper
      • Icon: CSSProps - CSS properties for the icon
      • Button: CSSProps - CSS properties the button
      • Hint: CSSProps - CSS properties the hint
  • Supervisor: object

    Theme properties for the Supervisor component

    • Container: CSSProps - CSS properties for the wrapper component
    • TaskCanvas: Theme.SupervisorTaskCanvasThemeProps - Style properties for TaskCanvas component
    • WorkerCanvas: object - Theme properties for the WorkerCanvas component
      • Container: CSSProps - CSS properties for the wrapper
      • Header: CSSProps - CSS properties for the header
      • SectionCaption: CSSProps - CSS properties for all the section captions
    • FilterButton: CSSProps - CSS properties for the filter button
    • Search: object - Theme properties for the search input
      • Container: CSSProps - CSS properties for the wrapper
      • Button: CSSProps - CSS properties for the search button
  • WorkerDirectory: object

    Theme properties for the WorkerDirectory component

    • Container: CSSProps - CSS properties for the wrapper
    • Header: object - Theme properties for the header
      • Button: CSSProps - CSS properties for the clickable header
      • Container: CSSProps - CSS properties for the wrapper
    • ItemsContainer: CSSProps - CSS properties for all the item wrapper components
    • Item: CSSProps - CSS properties for all the items
    • ItemActionButton: CSSProps - CSS properties for the action button
    • QueueItem: object - Theme properties for queue items
      • Avatar: CSSProps - CSS properties for the avatar
  • WorkerSkills: object

    Theme properties for the WorkerSkills component

    • SaveButton: CSSProps - CSS properties for the save button
    • CancelButton: CSSProps - CSS properties for the cancel button
    • DeleteButton: CSSProps - CSS properties for the delete button
  • LoadingView: object

    Theme properties for the LoadingView component

    • Container: CSSProps - CSS properties for the wrapper
  • ErrorPage: object

    Theme properties for the Error Page

    • Container: CSSProps - CSS properties for the wrapper component
    • Actions: object - Theme properties for the error page action buttons
      • RetryButton: CSSProps - CSS properties for the retry button
      • DownloadReportButton: CSSProps - CSS properties for the download report button
  • ParticipantsCanvas: Theme.ParticipantsCanvasThemeProps

    Style properties for the Participants Canvas

    • ParticipantCanvas: ParticipantCanvasThemeProps - Styles for a single participant.
      • Container: CSSProps - Styles participant container.
      • Avatar: CSSProps - Styles participant avatar.
      • TranscriptAvatar: CSSProps - Styles participant avatar in CCAI flow.
      • StateHover: CSSProps - Styles hover state on participant avatar.
      • ConnectingAnimation: CSSProps - Styles participant connecting state.
      • Button: CSSProps - Styles button in participant canvas.
      • HangUpButton: CSSProps - Styles hang up button in participant canvas.
    • Notification: ParticipantsCanvasNotificationThemeProps - Styles for notification in participants canvas.
      • Container: CSSProps - Styles participants container.
    • Disclosure: CSSProps - Styles for Disclosure Paste Component in Google CCAI flow.
    • DisclosureContent: CSSProps - Styles for Disclosure Content Paste Component in Google CCAI flow.
    • DisclosureHeading: CSSProps - Styles for Disclosure Header Paste Component in Google CCAI flow.
  • OutboundDialerPanel: Theme.OutboundDialerPanelThemeProps

    Style properties for the Outbound Dialer

    • Container: CSSProps - Styles container in OutboundDialerPanel.
      • disabled: CSSProps - Styles disabled state.
    • Header: CSSProps - Styles header in OutboundDialerPanel.
    • HeaderButton: CSSProps - Styles header button in OutboundDialerPanel.
  • colors: Theme.CoreThemeColors | Theme.BaseThemeColors

    theme colors

    • defaultButtonColor: string - The default button color
    • lightTextColor: string - The color for the light texts
    • darkTextColor: string - The color for the dark texts
    • buttonHoverColor: string - The color for the buttons hover state
    • tabSelectedColor: string - The color for the selected tabs
    • connectingColor: string - The color for the connecting copy
    • disconnectedColor: string - The color for the disconnected copy
    • notificationBackgroundColorInformation: string - The color for the information notifications background
    • notificationBackgroundColorSuccess: string - The color for the success notifications background
    • notificationBackgroundColorError: string - The color for the error notifications background
    • notificationIconColorWarning: string - The color for the icons in the warning notifications
    • notificationBackgroundColorWarning: string - The color for the warning notifications background
    • notificationIconColorError: string - The color for the icons in the error notifications
    • userAvailableColor: string - The color for available users
    • userUnavailableColor: string - The color for unavailable users
    • errorColor: string - Error color
    • errorGlow: string - Error glow
    • circularProgressColor: string - Color of the circular progress bar
    • disabledColor: string - Color the disabled elements
    • focusColor: string - Color for the focused elements
    • focusGlow: string - Color of the glow for the focused elements
  • Chat: ChatTheme

    Chat components theme properties

  • SidePanel: Theme.SidePanelThemeProps

    components theme properties

    • Container: CSSProps - Main container
    • Header: CSSProps - Header element
    • HeaderButton: CSSProps - Close button in header element
  • Badge: Theme.BadgeThemeProps

    components theme properties

    • OuterCircle: CSSProps - external part of the circle that takes care of position and spacing around main inner circle
    • InnerCircle: CSSProps - main part of the circle - takes care of badge size, font and colors
  • FormComponents: Theme.FormComponentsThemeProps

    FormComponents theme properties

    • Input: CSSProps - Styles for the form input component
    • TextArea: CSSProps - Styles for the form textarea component
    • Select: CSSProps - Styles for the form select component
  • Button: Theme.ButtonThemeProps

    Button theme properties

    • disabledColor?: string - Use the disabled color
    • lightHover?: boolean - Use the light hover effect
  • Menu: Theme.MenuThemeProps

    Menu theme properties

  • Progress: object

    Container for the Circular progress bar theme properties

    • Circular: Theme.CircularProgressThemeProps - Circular progress bar theme properties
      • staticBackgroundBorderColor: string - color for static background border
      • animatingBackgroundBorderColor: string - color for animating background border
      • animatingForegroundBorderColor: string - color for animating foreground border
  • Dialpad: Theme.DialpadThemeProps

    Dialpad theme properties

    • Button: DialpadButtonThemeProps - Style for the dialpad's buttons
      • Container: CSSProps | Object - Style for the dialpad button's container
      • Caption: CSSProps - Style for the dialpad button's caption
      • Description: CSSProps - Style for the dialpad button's description
  • Dialer: Theme.DialerThemeProps

    Dialer theme properties

    • CallButton: ButtonThemeProps - Style for the dialer's Call Button
      • disabledColor?: string - Use the disabled color
      • lightHover?: boolean - Use the light hover effect
  • Avatar: Theme.AvatarThemeProps

    Avatar theme properties

    • Container: CSSProps - container
    • AvailabilityIcon: CSSProps - availability icon
  • Tabs: Theme.TabsThemeProps

    Tabs theme properties

    • Container: CSSProps - Styles for the tabs container
    • LabelsContainer: CSSProps - Styles for the container for the tab header labels
    • Button: ButtonThemeProps - Styles for the icon based tab headers
      • disabledColor?: string - Use the disabled color
      • lightHover?: boolean - Use the light hover effect
    • Active: CSSProps - Styles for the active tab header container
    • Inactive: CSSProps - Styles for the inactive tab header container
    • LabelActive: CSSProps - Styles for the active tab label
    • LabelInactive: CSSProps - Styles for the inactive tab label
  • UserCard: Theme.UserCardThemeProps

    UserCard theme properties

  • FilterList: Theme.FiltersListThemeProps

    FilterList theme properties

    • ApplyButton: CSSProps - Styles for the main "Apply" button
    • ResetButton: CSSProps - Styles for the secondary "Reset" button
    • ItemContainer: CSSProps - Styles for the filter item wrapper element
    • ItemContainerExpanded: CSSProps - Styles for the expanded filter item wrapper element
  • CountrySelector: Theme.CountrySelectorThemeProps

    CountrySelector theme properties

    • CountryList: CSSProps - Style for the dialer's country list component
    • CountryItem: CSSProps | Object - Style for the dialer's country list component item
    • Flag: CSSProps - Style for the dialer's country list flag component
  • IconContainer: object

    Container for icons rendered in the Transcript

  • EmailPauseSection: object

    wrapper container for disabling the paused email task canvas

  • TranscriptMessage: object

    Custom styling to be applied to the ChatBubble paste component

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.