Alert
Alerts show high-signal messages meant to be noticed and prompting users to take action.
Component overview
Explore All WARP Components Across Figma, React, Vue, Elements, iOS, and Android.
Badge
Badges are used to highlight a relevant piece of information, like status or category.
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
Buttons initiate events or actions within a page, informing users of what to expect next.
Button group
Button group is a grouping concept for buttons
Button pill
Button pill allows users to toggle an element to their favourites.
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.
Date picker
A date picker allows the user to select a specific calendar date.
Expandable
Expandable is a layout component used for creating content that can be expanded and collapsed.
Icons
Warp’s icons are crafted to deliver consistency, clarity, and scalability across our multi-brand product ecosystem.
Link
Link component to use when creating links that look like buttons.
Modal
A modal is a focused dialog that temporarily blocks the interface to request a specific decision or input. Because it pauses the experience, use it sparingly for high-priority tasks.
Page indicator
A page indicator shows the total amount of pages (or images) and the current page using dots.
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.
Popover
A Popover is a message box that is displayed floating over page content after pressing a trigger element, like an info-icon.
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.
Range Slider
Range sliders allow users to adjust minimum and maximum numeric values within a given range.
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.