Coda UI components examples

Coda

A small card prompting the user to upgrade their plan to access a restricted feature. It includes an illustrative icon, a title, a brief explanation, and a primary call-to-action button.

• Upgrade your plan

Coda

A blue tooltip card providing onboarding guidance, featuring a title, description, a 'Learn more' link, and a 'Got it' button with a thumbs-up icon.

• Tips

Coda

A statistics modal showing document usage.

• Stepper

Coda

A table with task management

• Table

Coda

A card component prompting the user to start an interactive tutorial. It features a top illustration area, a title, a brief description, and a primary call-to-action button.

• Card

Coda

A progress bar component showing the completion status of a tutorial, including a title, a 'See more' link, a visual progress bar, and a text counter.

• Stepper

Coda

A dropdown menu with document collaboration options.

• Dropdown menu

Coda

A notification card showing a deleted message and an acceptance message.

• Card

Coda

A sidebar panel displaying a nested list of document version history, grouped by date and user, with expandable/collapsible sections.

• Timeline & history

Coda

A dropdown menu containing document-level actions, with a nested submenu open for print and export options.

• Dropdown menu

Coda

A list of features included in a specific pricing plan, presented with checkmarks and info icons for each item.

• Benefit List

Coda

A button group containing a secondary cancel button and a primary destructive action button to export data.

• Button group