Buttons

Buttons are used to control functionality in the user interface (e.g., to initiate navigation).

There are two types of buttons.

  • Filled button. A rectangular button with a solid background or border and rounded corners. This is the default button type.
  • Bare button. A button whose content is bare until the cursor is hovered over it. Used in cases where a multi-color button icon is needed and/or where button density precludes the filled button type (e.g., the System Toolbar, the Writing Editor).

All buttons receive the default cursor in the disabled state and the pointer cursor in all other states.

The following demo presents buttons with interactive default, hover, active, and disabled states.

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Filled Buttons

States

Filled buttons have the following states.

  • Default. The default state.
  • Hover. Visible when the cursor is over the button. Button color is lightened, and a drop shadow is added.
  • Active. Visible when the test taker presses down on the button. Button color is darkened and the drop shadow is removed.
  • Disabled. Visible when the button is inactive (e.g., when a modal system tool like Scratchwork is enabled). Button color changes to light gray #E5E5E5 , button text becomes dark gray #909090 , and the drop shadow is removed.

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Shapes

Filled buttons can be rectangular (when they contain text, or text and an icon) or circular (when they contain only an icon).

Sizes

Both rectangular and circular buttons come in default and small sizes. The small size is used to support the hierarchy or when space constraints prevent the default size.

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Hierarchy

Filled buttons vary in color depending on the type of action they trigger:

  • A blue #0068D1 background is used for buttons that trigger the primary action on the current screen (e.g., the Go on to next section button).
  • A ghost button with a gray #949494 border and blue #0855B2 text is used for secondary actions (e.g., Clear Answer buttons in selected-response items).

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Bare Buttons

Bare buttons have the following states.

  • Default. The default button state.
  • Hover. Button background color is lightened, and a border and drop shadow appear.
  • Active. The drop shadow becomes inset.
  • Toggled. Used when the tool a button controls has on and off states. Button background and border become blue.
  • Disabled. Button content is dimmed to indicate inactivity.

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.