Docked Composer is a persistent utility bar that allows a user to continually use the app to complete tasks or gather information while expanding/collapsing a composer window.

About Docked Composer#

Implementation#

The docked composer relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes.

The overflow menu for docked composer, .slds-docked-composer_overflow, displays when the number of docked composers exceeds the width of the viewport. The overflow pill displays with a number indicator for all hidden docked composers. A user can invoke a popover with all available docked composers and replace the furthest left docked composer with the one being selected.

When a user clicks on the "pop out" icon in the .slds-docked-composer__header, a modal displays and contains the task that was currently in the docked composer.

Base#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

States#

Open/Focused#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open slds-has-focus" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Closed#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-closed" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Closed/Focused#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-has-focus slds-is-closed" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Popped out#

<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-docked-composer-modal" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1" aria-modal="true">
  <div class="slds-modal__container">
    <div class="slds-modal__content" id="modal-content-id">
      <section class="slds-docked-composer slds-grid slds-grid_vertical">

<div class="slds-docked_container">
  <div class="slds-docked-composer slds-docked-composer_overflow">
    <button class="slds-button slds-button_icon slds-docked-composer_overflow__button" aria-haspopup="true">
      <svg class="slds-button__icon" aria-hidden="true">

Examples#

Log a task#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Email Composer#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Voice#

Queued#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Ringing#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Connected#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Cancelled#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Busy#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Call Failed#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

No Answer#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Call Finished#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Call Incoming#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Call Logged#

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-no-space">

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-docked-composer`
Summary
Support	dev-ready
Restrict	`section, div`
Variant	True

Selector	`.slds-has-focus`
Summary
Restrict	`.slds-docked-composer`
Modifier	True

Selector	`.slds-is-open`
Summary
Restrict	`.slds-docked-composer`
Modifier	True

Selector	`.slds-is-closed`
Summary
Restrict	`.slds-docked-composer`
Modifier	True

Selector	`.slds-docked-composer__header`
Summary	Bar at the top of the composer that contains actionable items to invoke, such as minimizing, popping out the composer and removing the composer.
Restrict	`.slds-docked-composer header`

Selector	`.slds-docked-composer__body`
Summary	Primary area within docked composer that contains specific task
Restrict	`.slds-docked-composer div`

Selector	`.slds-docked-composer__body_form`
Summary
Restrict	`.slds-docked-composer__body`

Selector	`.slds-email-composer`
Summary	Initiazes email composer inside of a docked composer
Restrict	`.slds-docked-composer__body div`

Selector	`.slds-email-composer__combobox`
Summary	Modifier combobox when used inside of email composer
Restrict	`.slds-email-composer div`

Selector	`.slds-email-composer__recipient`
Summary	Provides styles for recipient labels inside of email composer
Restrict	`.slds-email-composer label`

Selector	`.slds-docked-composer__lead`
Summary	Within the docked composer body, the lead is the first region
Restrict	`.slds-docked-composer div`

Selector	`.slds-docked-composer__toolbar`
Summary
Restrict	`.slds-docked-composer div`

Selector	`.slds-docked-composer__footer`
Summary	Bar at the bottom of the composer that contains actionable items to invoke, such as saving, associating relationships and adding content.
Restrict	`.slds-docked-composer footer`

Selector	`.slds-docked-composer_overflow`
Summary	When the number of docked composer exceed the width of the viewport, this class modifies the docked composer styles
Restrict	`.slds-docked-composer`

Selector	`.slds-dropdown`
Summary	Initializes dropdown
Restrict	`.slds-dropdown-trigger div, .slds-dropdown-trigger ul, .slds-docked-composer_overflow div`

Selector	`.slds-dropdown_left`
Summary	Positions dropdown to left side of target
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_right`
Summary	Positions dropdown to right side of target
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_bottom`
Summary	Positions dropdown to above target
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_xx-small`
Summary	Sets min-width of 6rem/96px
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_x-small`
Summary	Sets min-width of 12rem/192px
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_small`
Summary	Sets min-width of 15rem/240px
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_medium`
Summary	Sets min-width of 20rem/320px
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_large`
Summary	Sets min-width of 25rem/400px
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_large`
Summary	Sets width equal to input
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown_length-5`
Summary	Forces overflow scrolling after 5 list items
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-7`
Summary	Forces overflow scrolling after 7 list items
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-10`
Summary	Forces overflow scrolling after 10 list items
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-with-icon-5`
Summary	Forces overflow scrolling after 5 list items with an icon
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-with-icon-7`
Summary	Forces overflow scrolling after 7 list items with an icon
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-with-icon-10`
Summary	Forces overflow scrolling after 10 list items with an icon
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_inverse`
Summary	Theme
Restrict	`.slds-dropdown`
Modifier	True

Selector	`.slds-dropdown__header`
Summary	Adds padding to area above dropdown menu list
Restrict	`.slds-dropdown li`

Selector	`.slds-dropdown__item`
Summary	Initializes dropdown item
Restrict	`.slds-dropdown li`

Selector	`.slds-is-unsaved`
Summary	Dirty state for a nav item
Restrict	`.slds-context-bar__item, .slds-dropdown__item`

Selector	`.slds-has-error`
Summary	Places a menu item into an errored state
Restrict	`.slds-dropdown__item > a`
Modifier	True

Selector	`.slds-has-success`
Summary	Places a menu item into a success state
Restrict	`.slds-dropdown__item > a`
Modifier	True

Selector	`.slds-has-warning`
Summary	Places a menu item into a warning state
Restrict	`.slds-dropdown__item > a`
Modifier	True

Selector	`.slds-icon_selected`
Summary	If menu contains menuitemcheckbox then this toggles the selected icon when it is selected
Restrict	`.slds-dropdown__item svg`

Selector	`.slds-is-selected`
Summary	If menu contains menuitemcheckbox then this handles the selected states
Restrict	`.slds-dropdown__item`
Modifier	True

Selector	`.slds-has-submenu`
Summary	true
Restrict	`.slds-dropdown__item`

Selector	`.slds-dropdown_submenu`
Summary	true
Restrict	`.slds-has-submenu div`

Selector	`.slds-dropdown_submenu-left`
Summary	Open submenu to the left of the parent menu item
Restrict	`.slds-dropdown_submenu`
Modifier	True

Selector	`.slds-dropdown_submenu-right`
Summary	Open submenu to the right of the parent menu item
Restrict	`.slds-dropdown_submenu`
Modifier	True

Selector	`.slds-dropdown_submenu-bottom`
Summary	Open submenu along the bottom of the parent menu item
Restrict	`.slds-dropdown_submenu`

Selector	`.slds-has-notification`
Summary	Creates styles for a Tab Item when its tab has new activity in
Restrict	`.slds-tabs_default__item, .slds-dropdown__item`

Selector	`.slds-indicator_unread`
Summary	Unread notification icon
Restrict	`.slds-has-notification span`

Selector	`.slds-nubbin_top`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_top-left`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_top-right`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-left`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-right`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-top`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-bottom`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-top`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-bottom`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_top-left-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-left-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_top-right-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_bottom-right-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-top-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-top-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_left-bottom-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Selector	`.slds-nubbin_right-bottom-corner`
Summary
Restrict	`.slds-popover, .slds-dropdown`
Modifier	True

Docked Composer Release Notes

Sections

About Docked Composer#

Implementation#

Base#

States#

Open/Focused#

Closed#

Closed/Focused#

Popped out#

With overflow menu#

Examples#

Log a task#

Email Composer#

Voice#

Queued#

Ringing#

Connected#

Cancelled#

Busy#

Call Failed#

No Answer#

Call Finished#

Call Incoming#

Call Logged#

Overview of CSS Classes#

What are these categories?

Docked Composer Release Notes

Cookie Consent Manager

General Information

General Information

Required Cookies

Required Cookies

First Party Cookies

Functional Cookies

Functional Cookies

First Party Cookies

Advertising Cookies

Advertising Cookies

33Across

33Across

33Across