Design Openbook

Look-Alike Component Pairs

What is the difference between a toggle and a checkbox, or a modal and a bottom sheet? Each pair looks similar but does a different job: a toggle applies at once while a checkbox needs saving, and a modal appears centered while a bottom sheet slides up from below.

These elements look alike but do different jobs. Learn them as pairs and your specs and prompts get more precise.

Terms and previews

Tap a preview to pause it; tap again to play.

  1. Dropdown menu ↔ Select

    A menu that runs an action when you pick ↔ an input that keeps the chosen value in the field

  2. Button ↔ Link

    Runs something ↔ goes somewhere else

  3. Label ↔ Placeholder

    A field name that stays after typing ↔ example text that disappears when you type

  4. Toggle switch ↔ Checkbox

    Applies the moment you tap ↔ applies only after you save

  5. Modal ↔ Bottom sheet

    A window in the center of the screen ↔ a panel that slides up from the bottom

  6. Toast ↔ Snackbar

    A notice that shows briefly and disappears ↔ a notice with a button such as "Undo"

  7. Top app bar ↔ Tab bar

    A title row at the top ↔ a menu row at the bottom

  8. Card ↔ List

    Shows content in separate blocks ↔ shows content as connected rows

  9. Avatar ↔ Thumbnail

    A small picture that represents a person ↔ a preview picture of content

  10. Banner ↔ Popup

    A strip attached to one side of the screen ↔ a window that covers the screen

  11. Floating action button ↔ Icon button

    The most important button, floating over the screen ↔ a small secondary button

How to use it

  • Use a toggle only for settings that apply immediately. Put one inside a form with a Save button and users assume it is already applied.
  • Do not drop the label and keep only the placeholder. The moment typing starts, the user can no longer see what the field was for.
  • For a deletion that can be undone, use a snackbar with "Undo" instead of a confirmation modal. It saves one tap.

Prompts to copy

Settings screen

Build a settings screen.
- Notifications on/off is a Toggle switch. It applies as soon as it is tapped.
- Interests are a Checkbox list. Changes apply only after pressing the [Save] button at the bottom.
- Always put a Label above each input field. Use the Placeholder only for an example.
- When saved, show a "Saved" Toast for 2 seconds.

Source posts: @uxwoodytips, @uxwoodytips

All cards (27)