Components

Rich Text Editor

The Rich Text Editor is a textarea with added capabilities for use in various publishers.

BaseBase › DefaultBase › FocusedBase › Filled OutBase › ErrorBase › DisabledBase › TooltipBase › OverflowBasedev ready

Preview

Code

<div class="slds-rich-text-editor slds-grid slds-grid--vertical slds-nowrap">
  <div role="toolbar" class="slds-rich-text-editor__toolbar slds-is-relative slds-shrink-none slds-p-around--x-small slds-grid slds-theme--shade">
    <ul aria-label="Format text" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="bold" tabindex="0" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold"></use>
          </svg>
          <span class="slds-assistive-text">Bold</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="italic" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#italic"></use>
          </svg>
          <span class="slds-assistive-text">Italic</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="underline" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#underline"></use>
          </svg>
          <span class="slds-assistive-text">Underline</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="strikethrough" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#strikethrough"></use>
          </svg>
          <span class="slds-assistive-text">Strike Through</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Format body" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextbulletedlist" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextbulletedlist"></use>
          </svg>
          <span class="slds-assistive-text">Bulleted List</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextnumberedlist" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextnumberedlist"></use>
          </svg>
          <span class="slds-assistive-text">Numbered List</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextindent" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextindent"></use>
          </svg>
          <span class="slds-assistive-text">Indent</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextoutdent" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextoutdent"></use>
          </svg>
          <span class="slds-assistive-text">Outdent</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Remove Formatting" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#remove_formatting"></use>
          </svg>
          <span class="slds-assistive-text">Remove Formatting</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="slds-rich-text-editor__textarea">
    <label class="slds-assistive-text" for="composer-text-input-85">Compose text</label>
    <textarea id="composer-text-input-85" class="slds-assistive-text"></textarea>
    <div tabindex="0" class="slds-textarea slds-p-around--medium slds-text-longform slds-grid slds-grow">
      <div contenteditable="true" class="slds-text-color--weak slds-grow">Compose text...</div>
    </div>
  </div>
</div>

The default rich text editor contains a minimal amount of text formatting capabilities.

FeedFeed › DefaultFeed › FocusedFeed › Filled OutFeed › ErrorFeed › DisabledFeed › TooltipFeed › OverflowFeeddev ready

Preview

Code

<div class="slds-rich-text-editor slds-grid slds-grid--vertical slds-nowrap">
  <div role="toolbar" class="slds-rich-text-editor__toolbar slds-is-relative slds-shrink-none slds-p-around--x-small slds-grid slds-theme--shade">
    <ul aria-label="Format text" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="bold" tabindex="0" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold"></use>
          </svg>
          <span class="slds-assistive-text">Bold</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="italic" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#italic"></use>
          </svg>
          <span class="slds-assistive-text">Italic</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="underline" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#underline"></use>
          </svg>
          <span class="slds-assistive-text">Underline</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="strikethrough" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#strikethrough"></use>
          </svg>
          <span class="slds-assistive-text">Strike Through</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Format body" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextbulletedlist" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextbulletedlist"></use>
          </svg>
          <span class="slds-assistive-text">Bulleted List</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextnumberedlist" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextnumberedlist"></use>
          </svg>
          <span class="slds-assistive-text">Numbered List</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextindent" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextindent"></use>
          </svg>
          <span class="slds-assistive-text">Indent</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextoutdent" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextoutdent"></use>
          </svg>
          <span class="slds-assistive-text">Outdent</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Align text" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="left_align_text" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left_align_text"></use>
          </svg>
          <span class="slds-assistive-text">Left Align Text</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="center_align_text" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#center_align_text"></use>
          </svg>
          <span class="slds-assistive-text">Center Align Text</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="right_align_text" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right_align_text"></use>
          </svg>
          <span class="slds-assistive-text">Right Align Text</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Insert content" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="emoji" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#emoji"></use>
          </svg>
          <span class="slds-assistive-text">Add Emoji</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="image" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#image"></use>
          </svg>
          <span class="slds-assistive-text">Add Image</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="link" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#link"></use>
          </svg>
          <span class="slds-assistive-text">Add Link</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Add user" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="adduser" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#adduser"></use>
          </svg>
          <span class="slds-assistive-text">Add User</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Remove Formatting" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#remove_formatting"></use>
          </svg>
          <span class="slds-assistive-text">Remove Formatting</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="slds-rich-text-editor__textarea">
    <label class="slds-assistive-text" for="composer-text-input-86">Compose text</label>
    <textarea id="composer-text-input-86" class="slds-assistive-text"></textarea>
    <div tabindex="0" class="slds-textarea slds-p-around--medium slds-text-longform slds-grid slds-grow">
      <div contenteditable="true" class="slds-text-color--weak slds-grow">Post to feed...</div>
    </div>
  </div>
</div>

Rich text editors for feeds contain additional button sets to align text, insert images & links, and @ mention.

NoteNote › DefaultNote › FocusedNote › Filled OutNote › ErrorNote › DisabledNote › TooltipNote › OverflowNotedev ready

Preview

Code

<div class="slds-rich-text-editor slds-grid slds-grid--vertical slds-nowrap">
  <div role="toolbar" class="slds-rich-text-editor__toolbar slds-is-relative slds-shrink-none slds-p-around--x-small slds-grid slds-theme--shade">
    <ul aria-label="Format text" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="bold" tabindex="0" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold"></use>
          </svg>
          <span class="slds-assistive-text">Bold</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="italic" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#italic"></use>
          </svg>
          <span class="slds-assistive-text">Italic</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="underline" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#underline"></use>
          </svg>
          <span class="slds-assistive-text">Underline</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="strikethrough" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#strikethrough"></use>
          </svg>
          <span class="slds-assistive-text">Strike Through</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Format body" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextbulletedlist" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextbulletedlist"></use>
          </svg>
          <span class="slds-assistive-text">Bulleted List</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextnumberedlist" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextnumberedlist"></use>
          </svg>
          <span class="slds-assistive-text">Numbered List</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextindent" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextindent"></use>
          </svg>
          <span class="slds-assistive-text">Indent</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextoutdent" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextoutdent"></use>
          </svg>
          <span class="slds-assistive-text">Outdent</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Insert content" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="emoji" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#emoji"></use>
          </svg>
          <span class="slds-assistive-text">Add Emoji</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="image" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#image"></use>
          </svg>
          <span class="slds-assistive-text">Add Image</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="link" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#link"></use>
          </svg>
          <span class="slds-assistive-text">Add Link</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Remove Formatting" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#remove_formatting"></use>
          </svg>
          <span class="slds-assistive-text">Remove Formatting</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="slds-rich-text-editor__textarea">
    <label class="slds-assistive-text" for="composer-text-input-87">Compose text</label>
    <textarea id="composer-text-input-87" class="slds-assistive-text"></textarea>
    <div tabindex="0" class="slds-textarea slds-p-around--medium slds-text-longform slds-grid slds-grow">
      <div contenteditable="true" class="slds-text-color--weak slds-grow">Compose Note...</div>
    </div>
  </div>
</div>

Rich text editors for notes contain an additional button set to insert images & links.

EmailEmail › DefaultEmail › FocusedEmail › Filled OutEmail › ErrorEmail › DisabledEmail › TooltipEmail › OverflowEmaildev ready

Preview

Code

<div class="slds-rich-text-editor slds-grid slds-grid--vertical slds-nowrap">
  <div role="toolbar" class="slds-rich-text-editor__toolbar slds-is-relative slds-shrink-none slds-p-around--x-small slds-grid slds-theme--shade">
    <div class="slds-button-group" role="group" aria-label="Format font family &amp; size">
      <div class="slds-button-group">
        <span class="slds-assistive-text" id="choose-font">Choose a Font</span>
        <div class="slds-button-group slds-picklist slds-picklist--fluid slds-shrink-none">
          <button aria-describedby="choose-font" tabindex="0" aria-haspopup="true" class="slds-button slds-button--neutral slds-picklist__label slds-picklist__label--small">Font
            <svg class="slds-icon slds-icon--small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
          </button>
        </div>
      </div>
      <div class="slds-button-group">
        <span class="slds-assistive-text" id="choose-size">Choose a Font Size</span>
        <div class="slds-button-group slds-picklist slds-picklist--fluid slds-shrink-none">
          <button aria-describedby="choose-size" aria-haspopup="true" tabindex="-1" class="slds-button slds-button--neutral slds-picklist__label slds-picklist__label--small">14
            <svg class="slds-icon slds-icon--small" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <ul aria-label="Format text" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="bold" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold"></use>
          </svg>
          <span class="slds-assistive-text">Bold</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="italic" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#italic"></use>
          </svg>
          <span class="slds-assistive-text">Italic</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="underline" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#underline"></use>
          </svg>
          <span class="slds-assistive-text">Underline</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="strikethrough" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#strikethrough"></use>
          </svg>
          <span class="slds-assistive-text">Strike Through</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Format background &amp; text color" class="slds-button-group-list">
      <li>
        <button aria-describedby="backgroundcolor" tabindex="-1" class="slds-button slds-button--icon-more slds-button--icon-more-filled" aria-haspopup="true">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#text_background_color"></use>
          </svg>
          <svg class="slds-button__icon slds-button__icon--x-small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Background Color</span>
        </button>
      </li>
      <li>
        <button aria-describedby="textcolor" tabindex="-1" class="slds-button slds-button--icon-more slds-button--icon-more-filled" aria-haspopup="true">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#text_color"></use>
          </svg>
          <svg class="slds-button__icon slds-button__icon--x-small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Text Color</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Format body" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextbulletedlist" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextbulletedlist"></use>
          </svg>
          <span class="slds-assistive-text">Bulleted List</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextnumberedlist" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextnumberedlist"></use>
          </svg>
          <span class="slds-assistive-text">Numbered List</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextindent" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextindent"></use>
          </svg>
          <span class="slds-assistive-text">Indent</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="richtextoutdent" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextoutdent"></use>
          </svg>
          <span class="slds-assistive-text">Outdent</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Align text" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="left_align_text" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left_align_text"></use>
          </svg>
          <span class="slds-assistive-text">Left Align Text</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="center_align_text" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#center_align_text"></use>
          </svg>
          <span class="slds-assistive-text">Center Align Text</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="right_align_text" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right_align_text"></use>
          </svg>
          <span class="slds-assistive-text">Right Align Text</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Insert content" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="emoji" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#emoji"></use>
          </svg>
          <span class="slds-assistive-text">Add Emoji</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="image" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#image"></use>
          </svg>
          <span class="slds-assistive-text">Add Image</span>
        </button>
      </li>
      <li>
        <button class="slds-button slds-button--icon-border-filled" aria-describedby="link" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#link"></use>
          </svg>
          <span class="slds-assistive-text">Add Link</span>
        </button>
      </li>
    </ul>
    <ul aria-label="Remove Formatting" class="slds-button-group-list">
      <li>
        <button class="slds-button slds-button--icon-border-filled" tabindex="-1" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#remove_formatting"></use>
          </svg>
          <span class="slds-assistive-text">Remove Formatting</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="slds-rich-text-editor__textarea">
    <label class="slds-assistive-text" for="composer-text-input-88">Compose text</label>
    <textarea id="composer-text-input-88" class="slds-assistive-text"></textarea>
    <div tabindex="0" class="slds-textarea slds-p-around--medium slds-text-longform slds-grid slds-grow">
      <div contenteditable="true" class="slds-text-color--weak slds-grow">Compose Email...</div>
    </div>
  </div>
</div>

Rich text editors for emails have the most complete set of features to format fonts, colors, alignment, and insert items.

Component Overview

At a high-level, the buttons in RTE are organized into four groupings: “format text”, “format body”, “insert content”, and “clear formatting”.

The “clear formatting” button always stays at the end of the buttons set, regardless of which rich text editor variant is used. It should always stand by itself.

Accessibility

Ensure that there is a single tab key stop for the button groups in the toolbar, and that left and right arrows are used to navigate through each button.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-rich-text-editor
Applied to:

<div>

Outcome:

Container for Rich Text Editor

Required:

Required

Comments:

--

.slds-rich-text-editor__toolbar
Applied to:

<div>

Outcome:

Container for Rich Text Editor Toolbar

Required:

Required

Comments:

--