Rise UI components examples

Rise

A hero section featuring a top navigation bar, a prominent headline, a subheadline, a primary call-to-action button, and a partial view of the application interface.

• Hero section

Rise

• Dropdown menu

Rise

A segmented control allowing the user to select between a One-to-one or Collective meeting type. The One-to-one option is currently selected, indicated by a white background and border, while the unselected option has a light gray background.

• Toggle/Switch

Rise

A dropdown menu for selecting a color, featuring a search input at the top and a list of named colors with corresponding color swatches. The 'Default color' option is currently selected.

• Color picker

Rise

A dismissible informational card explaining how a feature works, with a title, description, and a 'Learn more' link.

• Tips

Rise

A bordered card explaining a feature with an icon, title, description text, and a 'Learn more' link.

• Tips

Rise

A dark, pill-shaped toast notification confirming that times have been copied to the clipboard, featuring a green checkmark icon.

• Notification Toast

Rise

A toggle switch with an accompanying icon and label to enable a single-use scheduling link.

• Toggle/Switch

Rise

A horizontal row containing an icon, a toggle switch in the off position, and a text label.

• Toggle/Switch

Rise

A purple tooltip pointing to a 'Show proposal' button, explaining the benefits of scheduling meetings with teammates. It includes a list of features and two action buttons: 'I understand' and 'Learn more'.

• Coachmark

Rise

A dropdown menu triggered from a top bar, offering options to change calendar views, toggle display settings, access help and community links, and manage app settings.

• Dropdown menu

Rise

A row of three buttons for managing an event: a delete icon button, a reschedule button with an icon, and a primary save button with keyboard shortcut indicators.

• Button group