Skip to main contentCarbon Design System

Text toolbars

A text toolbar is a set of buttons and menus that allows users to edit text, search keywords, attach files, and embed links.

Note: The keyword search concept included in this pattern is not currently available for production use. The guidance included reflects our current understanding of this topic, and the pattern is currently open for code contributions.

Resources

Text toolbar pattern library

Overview

A text toolbar is a set of buttons and menus that is grouped horizontally. These controls primarily allow text editing functionality. Formatting actions and style changes can be applied to the editable text within the text area below the text toolbar. Attaching files, embedding links, and searching keywords are additional functions a toolbar can have.

A text toolbar can be customized by adding or removing icon buttons based on specific user needs. This pattern illustrates the following options:

  • Redo
  • Undo
  • Cut
  • Copy
  • Paste
  • Typeface
  • Type size
  • Bold
  • Italic
  • Underline
  • Text color
  • Alignment
  • Bulleted list
  • Checked list
  • Numbered list
  • Indent more
  • Indent less
  • Attachment
  • Link
  • Search

Anatomy

Anatomy of a text toolbar
  1. Actions: Use “Undo” and “Redo” to undo or revert the last change made. Use “Cut”, “Copy”, and “Paste” to move pieces of text to another place within the text area, to copy text to the clipboard, or to paste copied text from the clipboard to a different place within the text area.
  2. Formatting: Change the typeface, size, style, and color of text.
  3. Paragraph: Select different alignments and indents for paragraph text and indicate bulleted, checked, or numbered lists.
  4. Attachment: Attach files or embed links in strings of text.
  5. Search: Search keywords within existing paragraphs of text.
  6. Text area: Designated area to type editable text.

When to use

The text toolbar provides an efficient way for users to perform several tasks:

  • Create, edit and save simple text files quickly.
  • Edit text with common actions like cut, copy and paste and formatting text styles.
  • Perform basic text search functionality.
  • Attach files or embed links within text.

Behaviors

States

The text toolbar includes a series of basic actions that adopt the icon button style. The action buttons typically have five different states—enabled, hover, focus, active, and disabled.