Alert
Alerts show high-signal messages meant to be noticed and prompting users to take action.
Overview
Explore All WARP Components Across Figma, React, Vue, Elements, iOS, and Android.
Supported on platform
Attention
Attention shows information that highlight content.
Badge
Badge is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.
Box
Box is a layout component used for separating content areas on a page.
Breadcrumbs
Breadcrumbs show the navigation structure for the current location.
Broadcast
Broadcast automatically fetches broadcast messages for the current (or a given) url.
Button group
Button group is a grouping concept for buttons
Buttons
Buttons initiate events or actions within a page, informing users of what to expect next.
Callout
Callouts are snippets of information, drawing attention to important content.
Card
Card is an interactive layout component to display information.
Checkbox
Checkboxes allow users to select one or more options from a number of choices.
Combo box
A combo box combines a dropdown list with an editable text input, allowing users to either select an option or type their own.
Expandable
Expandable is a layout component used for creating content that can be expanded and collapsed.
Icons
Warp's icon set is designed to help users understand actions and information, and to draw attention to elements.
Modal
A modal is a dialog that intentionally calls for users attention. Models interrupt users workflow by design.
Pagination
Pagination is used to split up long datasets into multiple 'pages'
Pill
Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.
Radio
Radios allow users to select a single option from a list.
Radio buttons
Radio buttons allow users to select a single option from a button group.
Select
A dropdown component allows users to choose a single value from a list of options in a limited space.
Slider
Sliders allow users to adjust a numeric value within a given range.
Spinner
A spinner informs users about the loading of content.
Steps
The steps component is built to handle user journeys, showing progress in the process.
Switch
The Switch component allows users to toggle between two states.
Tabs
Tabs are used to group content, allowing users to navigate views without leaving the page.
Text
Pre-defined styles provide a font and size.
Text area
A multiline text input component.
Text field
A single-line text input component.
Toast
Toasts are brief user feedback messages that overlay content.
Tooltip
A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.