Menus

.slds-dropdown-trigger — A Menu offers a list of actions or functions that a user can access.

dropdown

.slds-dropdown-trigger — Initializes a trigger element around the dropdown

dropdown › Base - Size large

dropdown › Sub Heading

dropdown › Single Icon - Left

dropdown › Double Icon - Left/Right

dropdown › Single Icon - Right

dropdown › Overflow menu with actions

dropdown › Menu with alert notifications

dropdown › RTL support - Center aligned

dropdown › RTL support - Left aligned

dropdown › RTL support - Right aligned

.slds-dropdown-trigger_hover

.slds-dropdown-trigger_hover — If someone is using javascript for click to toggle - this modifier will help

.slds-dropdown-trigger_click

.slds-dropdown-trigger_click — If someone is using javascript for click to toggle - this modifier will help

.slds-is-open

.slds-is-open — Opens dropdown menu when invoked on click

.slds-dropdown

.slds-dropdown — Initializes dropdown

listbox

.slds-listbox — Listbox container

.slds-listbox_inline

.slds-listbox_inline — Inline listbox

.slds-listbox_horizontal

.slds-listbox_horizontal — Horizontal listbox

.slds-listbox__item

.slds-listbox__item — Listbox item

.slds-listbox__option

.slds-listbox__option — Choosable option within listbox

.slds-media__body > :first-child

.slds-media__body > :first-child — If the listbox option is empty and slds-truncate is not present this fix the height of the option

base

.slds-chat — Root container of a chat session

.slds-chat-list

.slds-chat-list — Handles the display of chat items within a list

.slds-chat-listitem

.slds-chat-listitem — Handles spacing and direction of items in the list

.slds-chat-listitem_outbound

.slds-chat-listitem_outbound — Modifier used to style outbound message list items

inbound-message

.slds-chat-listitem_inbound — Modifier used to style inbound message list items

.slds-chat-listitem_bookend

.slds-chat-listitem_bookend — Modifier used for spacing bookend items

.slds-chat-listitem_event

.slds-chat-listitem_event — Modifier used for spacing event items

.slds-chat-message

.slds-chat-message — styles the outter part of a chat message

.slds-chat-message_faux-avatar

.slds-chat-message_faux-avatar — Used for when customer avatars are used in consequtive inbound messages to align the message body with the previous message

.slds-chat-avatar

.slds-chat-avatar — Used to style avatars in chat logs

.slds-chat-avatar__intials

.slds-chat-avatar__intials — Used to style the avatar intials for chat

.slds-chat-message__body

.slds-chat-message__body — Used to contain and align chat messages with their avatars

.slds-chat-message__image_loading

.slds-chat-message__image_loading — true

.slds-chat-message__text

.slds-chat-message__text — Used to style the chat text from agent or customer

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

.slds-chat-message__text_inbound

.slds-chat-message__text_inbound — Used for any specific inbound text styling

.slds-chat-message__text_outbound

.slds-chat-message__text_outbound — Used for any specific outbound text styling

.slds-chat-message__text_outbound-agent

.slds-chat-message__text_outbound-agent — Used for any specific outbound (from another agent) text styling

unsupported

.slds-chat-message__text_unsupported-type — Used for an inbound message that is not a supported message type

delivery-failure

.slds-chat-message__text_delivery-failure — Used for an inbound message that fails to deliver

.slds-chat-message__text_delivery-failure-reason

.slds-chat-message__text_delivery-failure-reason — Element that contains feedback for why inbound message failed

.slds-chat-message__text_sneak-peek

.slds-chat-message__text_sneak-peek — Used when sneak peek is enabled for customer messages

.slds-chat-message__file

.slds-chat-message__file — true

.slds-chat-message__file_inbound

.slds-chat-message__file_inbound — Used for any specific inbound file styling

.slds-chat-message__meta

.slds-chat-message__meta — Used to style chat message meta data

.slds-chat-message__action

.slds-chat-message__action — Used to style chat message resend action

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

.slds-chat-event

.slds-chat-event — During any chat, certain events can occur which need to be displayed to the user

.slds-chat-event__rule

.slds-chat-event__rule — Used to style the horizontal rules on an event

.slds-chat-event__body

.slds-chat-event__body — Used for styling the event body text

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

.slds-chat-event__agent-message

.slds-chat-event__agent-message — Used to style any messages from an agent in the event

error

.slds-has-error — Modifier to indicate the event was an error

.slds-chat-bookend

.slds-chat-bookend — Used to style a chat bookend

.slds-chat-icon

.slds-chat-icon — Used to style icons with a chat log

stop

.slds-chat-bookend_stop — Modifier for bookends which stop a chat session

past

.slds-chat_past — Apply when displaying chat logs that appeared in the past

.slds-chat-message__text_delivery-failure-reason

.slds-chat-message__text_delivery-failure-reason — Element that contains feedback for why inbound message failed

error

.slds-has-error — Modifier to indicate the event was an error

.slds-listbox_selection-group

.slds-listbox_selection-group — The container of pill selections found inside of a combobox group

.slds-listbox__item

.slds-listbox__item — Listbox item

.slds-is-expanded

.slds-is-expanded — Expanded state of a selection group

.slds-listbox-toggle

.slds-listbox-toggle — Toggle button to show all of the pill selections

base

.slds-dynamic-menu

.slds-dynamic-menu__header

.slds-dynamic-menu__header — Headers styles for dynamic menu

.slds-global-header__item_search

.slds-global-header__item_search — Region that contains the search input, handles sizing

.slds-global-search__form-element div

.slds-global-search__form-element div — Primary combobox that contains the search input, handles sizing

.slds-listbox_selection-group

.slds-listbox_selection-group — The container of pill selections found inside of a combobox group

.slds-listbox__item

.slds-listbox__item — Listbox item

.slds-is-expanded

.slds-is-expanded — Expanded state of a selection group

.slds-listbox-toggle

.slds-listbox-toggle — Toggle button to show all of the pill selections

.slds-backdrop

.slds-backdrop — Creates the shaded backdrop used behind the modal.

.slds-backdrop_open

.slds-backdrop_open — Allows the backdrop to be visible.

.slds-is-active

.slds-is-active — Active state of an item

.slds-backdrop

.slds-backdrop — Creates the shaded backdrop used behind the modal.

.slds-backdrop_open

.slds-backdrop_open — Allows the backdrop to be visible.

base

.slds-popover — A dialog popover, `.slds-popover`, can be applied to all variants of a dialog popover. It initiates the styles of the popover and enables `.slds-nubbin` to be applied. A dialog popover requires at least one focusable element.

.slds-popover_edit

.slds-popover_edit — Dialog specific for inline-edit popover

.slds-form-element__label_edit

.slds-popover__meta

.slds-popover__meta — Applies styles for meta content of popover

.slds-popover__body

.slds-popover__body — Applies styles for primary content area of popover

.slds-listbox__item

.slds-listbox__item — Listbox item

.slds-popover__body_small

.slds-popover__body_small — Applies a max-height and vertical scrolling to a popover body

.slds-popover__header

.slds-popover__header — Applies styles for top area of popover

.slds-popover__footer

.slds-popover__footer — Applies styles for footer area of popover

.slds-popover__footer_form

.slds-popover__footer_form — Applies styles to center align content for footer area of a form popover

.slds-popover__close

.slds-popover__close — Close button within a popover

.slds-popover_small

.slds-popover_small — Width modifier for popover - small

.slds-popover_medium

.slds-popover_medium — Width modifier for popover - medium

.slds-popover_large

.slds-popover_large — Width modifier for popover - large

.slds-popover_full-width

.slds-popover_full-width — Modifier for popover to take 100% width

.slds-popover_hide

.slds-popover_hide — Modifier to hide a popover

.slds-popover_dark

.slds-popover_dark — Applies styles for dark variant of popover

brand

.slds-popover_brand — Initializes a brand popover

.slds-popover_brand-top

.slds-popover_brand-top — Applies popover brand styles to top

.slds-popover_brand-left

.slds-popover_brand-left — Applies popover brand styles to left

.slds-popover_brand-bottom

.slds-popover_brand-bottom — Applies popover brand styles to bottom

.slds-popover_brand-right

.slds-popover_brand-right — Applies popover brand styles to right

error

.slds-popover_error — Initializes an error non-modal dialog

.slds-popover__body_scrollable

.slds-popover__body_scrollable — Applies scrollable styles for popovers

feature

.slds-popover_feature — Initializes a feature non-modal dialog

.slds-nubbin_top

.slds-nubbin_top-left

.slds-nubbin_top-right

.slds-nubbin_bottom

.slds-nubbin_bottom-left

.slds-nubbin_bottom-right

.slds-nubbin_left

.slds-nubbin_left-top

.slds-nubbin_left-bottom

.slds-nubbin_right

.slds-nubbin_right-top

.slds-nubbin_right-bottom

.slds-nubbin_top-left-corner

.slds-nubbin_bottom-left-corner

.slds-nubbin_top-right-corner

.slds-nubbin_bottom-right-corner

.slds-nubbin_left-top-corner

.slds-nubbin_right-top-corner

.slds-nubbin_left-bottom-corner

.slds-nubbin_right-bottom-corner

panels

.slds-popover_panel

Label for panels

.slds-popover_panel__label

prompt

.slds-popover_prompt — Initializes a prompt non-modal dialog

.slds-popover_prompt__heading

.slds-popover_prompt__heading — Applies styles for heading text of prompt

.slds-popover_prompt__action-link

.slds-popover_prompt__action-link — Applies styles for the optional action link in the footer of prompt

.slds-popover_prompt_top-left

.slds-popover_prompt_top-left — Position Prompt top left

.slds-popover_prompt_top

.slds-popover_prompt_top — Position Prompt top center

.slds-popover_prompt_top-right

.slds-popover_prompt_top-right — Position Prompt top right

.slds-popover_prompt_bottom-left

.slds-popover_prompt_bottom-left — Position Prompt bottom left

.slds-popover_prompt_bottom

.slds-popover_prompt_bottom — Position Prompt bottom center

.slds-popover_prompt_bottom-right

.slds-popover_prompt_bottom-right — Position Prompt bottom right

walkthrough

.slds-popover_walkthrough — Initializes a walkthrough non-modal dialog

.slds-popover_walkthrough-alt

.slds-popover_walkthrough-alt — Alternate background for walkthrough non-modal dialog

warning

.slds-popover_warning — Initializes an warning non-modal dialog

.slds-popover__body_scrollable

.slds-popover__body_scrollable — Applies scrollable styles for popovers

einstein

.slds-popover_einstein — Initializes a Einstein non-modal dialog

base

.slds-modal_prompt — Initializes Prompt style notification

base

.slds-popover_tooltip — Initializes a tooltip

rise

.slds-rise-from-ground — Toggles on tooltip

fall

.slds-fall-into-ground — Toggles off tooltip

bottom-to-top

.slds-slide-from-bottom-to-top — Slides tooltip from bottom to top

top-to-bottom

.slds-slide-from-top-to-bottom — Slides tooltip from top to bottom

right-to-left

.slds-slide-from-right-to-left — Slides tooltip from right to left

left-to-right

.slds-slide-from-left-to-right — Slides tooltip from left to right

.slds-truncate

.slds-truncate — Creates truncated text

.slds-listbox__option-header

.slds-listbox__option-header — Header for choosable option within listbox

.slds-listbox__option-icon

.slds-listbox__option-icon — Container for listbox option icon

.slds-has-focus

.slds-has-focus — Focus state of a vertical listbox option

.slds-listbox__option_entity

.slds-listbox__option_entity — Modifies the listbox option if it contains an entity object

.slds-listbox__option_plain

.slds-listbox__option_plain — Modifies the listbox option if it contains an plain object or string

.slds-listbox__option_has-meta

.slds-listbox__option_has-meta — If the listbox option has metadata or secondary information that sits below its primary text

.slds-is-selected

.slds-is-selected — Modifier that makes selected icon visible

.slds-listbox__option-text_entity

.slds-listbox__option-text_entity — The main text of an entity listbox

.slds-listbox__option-meta

.slds-listbox__option-meta — The metadata or secondary text of an entity listbox

.slds-listbox__icon-selected

.slds-listbox__icon-selected — The icon within a plain listbox that indicates if an option has been selected or not.

.slds-listbox_vertical

.slds-listbox_vertical — Creates a vertical listbox

.slds-dropdown_length-5

.slds-dropdown_length-5 — Forces overflow scrolling after 5 list items

.slds-dropdown_length-7

.slds-dropdown_length-7 — Forces overflow scrolling after 7 list items

.slds-dropdown_length-10

.slds-dropdown_length-10 — Forces overflow scrolling after 10 list items

.slds-dropdown_length-with-icon-5

.slds-dropdown_length-with-icon-5 — Forces overflow scrolling after 5 list items with an icon

.slds-dropdown_length-with-icon-7

.slds-dropdown_length-with-icon-7 — Forces overflow scrolling after 7 list items with an icon

.slds-dropdown_length-with-icon-10

.slds-dropdown_length-with-icon-10 — Forces overflow scrolling after 10 list items with an icon

.slds-dropdown_inverse

.slds-dropdown_inverse — Theme

.slds-dropdown__header

.slds-dropdown__header — Adds padding to area above dropdown menu list

.slds-dropdown__item

.slds-dropdown__item — Initializes dropdown item

.slds-is-unsaved

.slds-is-unsaved — Dirty state for a nav item

.slds-has-error

.slds-has-error — Places a menu item into an errored state

.slds-has-success

.slds-has-success — Places a menu item into a success state

.slds-has-warning

.slds-has-warning — Places a menu item into a warning state

.slds-icon_selected

.slds-icon_selected — If menu contains menuitemcheckbox then this toggles the selected icon when it is selected

.slds-is-selected

.slds-is-selected — If menu contains menuitemcheckbox then this handles the selected states

submenu

.slds-has-submenu — true

.slds-dropdown_submenu

.slds-dropdown_submenu — true

.slds-dropdown_submenu-left

.slds-dropdown_submenu-left — Open submenu to the left of the parent menu item

.slds-dropdown_submenu-right

.slds-dropdown_submenu-right — Open submenu to the right of the parent menu item

.slds-dropdown_submenu-bottom

.slds-dropdown_submenu-bottom — Open submenu along the bottom of the parent menu item

.slds-has-notification

.slds-has-notification — Creates styles for a Tab Item when its tab has new activity in

.slds-indicator_unread

.slds-indicator_unread — Unread notification icon

.slds-dropdown_left

.slds-dropdown_left — Positions dropdown to left side of target

.slds-dropdown_right

.slds-dropdown_right — Positions dropdown to right side of target

.slds-dropdown_bottom

.slds-dropdown_bottom — Positions dropdown to above target

.slds-dropdown_xx-small

.slds-dropdown_xx-small — Sets min-width of 6rem/96px

.slds-dropdown_x-small

.slds-dropdown_x-small — Sets min-width of 12rem/192px

.slds-dropdown_small

.slds-dropdown_small — Sets min-width of 15rem/240px

.slds-dropdown_medium

.slds-dropdown_medium — Sets min-width of 20rem/320px

.slds-dropdown_large

.slds-dropdown_large — Sets min-width of 25rem/400px

.slds-dropdown_fluid

.slds-dropdown_fluid — Sets width equal to input

.slds-dropdown_length-5

.slds-dropdown_length-5 — Forces overflow scrolling after 5 list items

.slds-dropdown_length-7

.slds-dropdown_length-7 — Forces overflow scrolling after 7 list items

.slds-dropdown_length-10

.slds-dropdown_length-10 — Forces overflow scrolling after 10 list items

.slds-dropdown_length-with-icon-5

.slds-dropdown_length-with-icon-5 — Forces overflow scrolling after 5 list items with an icon

.slds-dropdown_length-with-icon-7

.slds-dropdown_length-with-icon-7 — Forces overflow scrolling after 7 list items with an icon

.slds-dropdown_length-with-icon-10

.slds-dropdown_length-with-icon-10 — Forces overflow scrolling after 10 list items with an icon