Dropbox UI components examples

Dropbox

User profile dropdown menu

• Theme settings

Dropbox

A progress bar showing storage usage broken down by file type, with a legend below.

• Progress indicator

Dropbox

A read-only input field displaying a referral link, accompanied by a 'Copy' button.

• Empty state

Dropbox

A feature gate banner prompting the user to upgrade their plan to access branding features. It includes a title, a descriptive paragraph, a primary call-to-action button to start a free trial, and a secondary link for more information.

• Upgrade your plan

Dropbox

A vertical stepper component for a security checkup wizard. The first step is expanded and active, prompting the user to verify their email address with a 'Yes' button or a 'Change' link. Subsequent steps are collapsed and numbered.

• Stepper

Dropbox

A file upload component allowing users to drag and drop a file, upload from their computer, or choose a file from Dropbox.

• File upload input

Dropbox

A toggle switch with descriptive text.

• Toggle/Switch

Dropbox

A horizontal tab navigation bar with a page title above it. The active tab is indicated by a solid black underline and darker text.

• Tabs

Dropbox

An input field with a search icon and a selected tag representing a user filter.

• Input tag

Dropbox

A date picker popover displaying a calendar for July 2024, with July 12th selected. It is triggered by an input field labeled 'From date'.

• Datepicker

Dropbox

An empty state message for a signatures list, featuring an illustration, a title, a brief explanation, and two action buttons to initiate signing.

• Empty state

Dropbox

A dark tooltip pointing upwards, displaying explanatory text over a light background.

• Tooltip