### Accordion
- description: Accordion is a list of items that shows and hides content in collapsible sections.
- do: Use it to organize content by grouping it into collapsible sections. Use it to show information on user demand only.
- donts: Don't use when content is crucial to read in full. Use `` with section titles instead.
### AddItem
- description: Add item component allows users to add a new item to an existing list.
- do: Use it to add a new item to the list. Use it together with `` mechanism to add a new file to a list.
- donts: Don't use it for standard actions. Use `` or `` instead.
### AddressInput
- description: Address input allows users to enter a location address. This component provides UI definition only and requires an address provider to be specified from the product side.
- do: Use it to search for a location. Use it to enter addresses that must be validated before they are submitted. Use it as a UI element together with a required address provider passed from the side.
- donts: Don't use it as a standalone solution. Use `` instead.
### AddressInputItem
- description: Address Input Item is an internal component that displays address list item in a dropdown selection. It's mainly used as a part of the `` component.
- do: Use it to represent address selection items.
- donts: Don't use it to represent an option of any select component. Use `` instead.
### AnalyticsLayout
- description: Analytics layout arranges analytics items into rows according to a minimum and maximum number of items per row. Each item is wrapped in an `` and is typically an ``.
- do: Use it to arrange a set of key metrics in evenly filled rows. Use it with `` cells to build a metrics overview on a dashboard.
- donts: Don't use it for a single metric. Use `` on its own instead. Don't use it for general page layout. Use `` and `` instead. Don't place it in a container narrower than 636px.
### AnalyticsSummaryCard
- description: Analytics Summary Card component provides a concise overview of key metrics, helping users quickly understand performance insights at a glance.
- do: Use short labels that are easy to read. Use it together with `` to control the layout.
- donts: Don't overcrowd the card with too much information. Don't add ambiguous metrics, to prevent misinterpretation.
### AngleInput
- description: Angle input enables users select an angle degree value.
- do: Use it to adjust settings, such as shadow or rotation. Use angle input with `` to indicate to value and give users the option to type the value manually.
- donts: Don't use it to select a linear value, use `` instead.
### AnnouncementModalLayout
- description: Use this component inside a Modal component to display content in the AnnouncementModalLayout. You may place a title and/or a footer with actions relevant to the displayed content
- do: Keep the message concise and benefit-focused. Make it easy to dismiss. Include an illustration.
- donts: Don't use it for critical information or destructive actions. Use `` instead. Don't use it for forms or other inputs. Use `` instead. Don't overload it with multiple CTAs or complex content.
### AreaChart
- description: An area chart is a way of plotting data points on a line and shading the area beneath it. It is often used to show trend data, such as how a metric changes over time.
- do: Use it to show how a single metric changes over time, for example daily sales or site visits. Use it when the overall trend matters more than the exact value of each point.
- donts: Don't use it to compare values across categories. Use `` instead. Don't use it for a small inline trend inside a table or a statistics widget. Use `` instead.
### AtlasAddressInput
- description: AtlasAddressInput allows users to search for an address with a built-in autocomplete service. To use this component you must install the following peer-dependencies: `npm install` `@wix/ambassador` `@wix/ambassador-wix-atlas-service-web`
- do: Use it as a built-in solution for a location search. Use it to enter addresses that must be validated before submitting.
- donts: Don't use it when a custom address provider is necessary. Use `` which provides the UI only.
### AudioPlayer
- description: Audio player lets users play an uploaded audio file.
- do: Use it to play audio files, such as songs or voice messages.
- donts: Don't use it to compose a video player. Use wix.github.io/playable/ instead.
### AutoComplete
- description: Autocomplete allows users to select a single item from a predefined list of options. Users can type into the input field to filter the list.
- do: Use it to select an item from a list with 10 or more options. Use it with user-generated data (e.g., a staff member list, custom categories, labels, products, etc.)
- donts: Don't use it when there are fewer than 10 options. Use the `` component instead.
### AutoCompleteWithLabel
- description: AutoCompleteWithLabel allows users to select a single item from a predefined list of options. This component provides an editable input field for filtering the list and a built-in label.
- do: Use it in Wix Premium checkout form.
- donts: Don't use it in Wix Business Manager applications, use `` instead.
### Avatar
- description: Avatar visually represents a user or an organization either as an image, text (name initials) or a placeholder image.
- do: Use it in circle shape to represent a user. Use it in square shape to represent an organization.
- donts: Don't use it to display visual content other than users or organizations. Use `` instead. Don't use it to display a group of users. Use `` instead. Don't use it as a round image placeholder, use `` instead.
### AvatarGroup
- description: AvatarGroup allows to display a number of avatars (digital representation of a user) as a single entity. It's a building block grouping number of standalone `` components.
- do: Use it to display a group of 2+ users Use it to display users that have something in common (i.e. belong to a project, are in the same team, attend the same event, etc.)
- donts: Don't use it to display single avatar Don't use it to display visual content other than users (i.e. images - use ``)
### Badge
- description: A badge is a visual indicator that informs users about the status of an item or function.
- do: Use badges to show the status of an item or function. Use short and clear text labels (1 - 2 words).
- donts: Don't use badges to display a number of items. Use `` instead. Don't use them to label, categorize or organize content using descriptive keywords. Use `` instead.
### BadgeSelect
- description: The BadgeSelect component is used for selecting a badge from a list.
- do: Use it to let users change the status of an item where the status is shown. Keep the text of each option short, one or two words.
- donts: Don't use it for a status that users can't change. Use `` instead. Don't use it for options that don't represent a status. Use `` instead.
### BadgeSelectItem
- description: An option builder for the `` component and its consumers.
- do: Use it to build status options for `` or other dropdown lists. Use the subtitle for extra details about an option, such as an email or address.
- donts: Don't use it for options that don't represent a status. Use `` instead.
### BarChart
- description: A bar chart is a statistics component that shows the relative value of the compared data as a row of proportional bars. Use it to help users analyse sources of income, visits and similar.
- do: Use it to compare the relative value of a few data sources, such as income streams or traffic channels. Use it to show what share of a known total each item makes up. Set the total when the items don't add up to the whole. Give every item a description so users know what each bar stands for.
- donts: Don't use it to show how values change over time. Use `` or `` instead. Don't use it for a long list of items. Narrow bars can't display their values.
### BounceAnimation
- description: `` is a wrapper with a predefined bounce animation. It emphasizes UI elements with a bounce motion.
- do: Use it to emphasize an element that needs the user's attention. Play it once, and loop it only until users act on the element.
- donts: Don't animate several elements on the same screen at once. Don't use it only for decoration.
### Box
- description: A box is a container that allows the layout, alignment, spacing and style of its child elements. Boxes can wrap and apply CSS styles to one or more elements that are contained inside. A box renders `data-*` and `aria-*` props as attributes on its root element and forwards div event handlers, such as `onClick`, `onKeyDown`, and `onPointerEnter`, to that element. It applies any other prop it doesn't define as a CSS style.
- do: Arrange elements vertically or horizontally. Apply custom spacing and styles. Build custom widgets.
- donts: Don't use a box to build page layouts, instead use the `` component. Don't use a box to build the structure of the content inside a page. To build page structures, use a combination of `` and `` components.
### Breadcrumbs
- description: Breadcrumbs show the page a user is on within the site hierarchy and let them navigate back.
- do: Use it in pages that are arranged in site hierarchy. Add breadcrumbs to deeper level pages (i.e. second, third, etc.). Use it when users navigate between folders or lists.
- donts: Don't use it on first level pages. Don't use it to show the progress of a task or process. Use `` instead.
### BrowserPreviewWidget
- description: Browser preview widget enables users to see how their site will look like when opened in a web browser.
- do: Use it to show how a user's site or other content will appear in a web browser. Use it to show how user-controlled settings look like in a published website.
- donts: Don't use it to preview content on mobile devices (use `` instead). Don't use it to show how a website's URL appears on social media (use `` or `` instead). Don't use it to show how a site appears on Google search results (use `` instead).
### Button
- description: Buttons let users initiate actions, like saving changes, navigating or canceling. They're used throughout the UI in various places like pages, widgets and modals.
- do: Use it to communicate primary and secondary actions users can take. Give secondary action buttons a different style to indicate their lower priority.
- donts: Don't use it for links. Use `` instead. Don't use more than one primary button at a time.
### Calendar
- description: Calendar component lets to pick a date while seeing the full month of days. It's used in `` component, but it can be used alone too.
- do: Use it to show the list of available days to choose from Use it if calendar needs to be prominent all the time Use it to display multiple months at once
- donts: Don't use it when user needs to enter a lot of data at once. Use `` instead. Don't use it when screen space is limited. Use `` instead.
### CalendarPanel
- description: Calendar Panel component lets a user pick a date while providing a great overview of available selections.It's built using `` and `` components.
- do: Use it when a wider view of available dates should be seen Use it when needed to select recurring range of days, for example in charts Use it when extra validation is needed before submitting the date selection
- donts: Don't use it in compact layouts, use `` instead Don't use it in forms, use `` instead
### CalendarPanelFooter
- description: Calendar panel footer is an internal component that is designed to layout submit actions for a date selector. It is used as a part of the `` component.
- do: Use it as a fundamental part of `` to display submit actions and selected date
- donts: Don't use it as a standalone component. Use it inside of `` only.
### Card
- description: Cards are containers that group related content and actions.
- do: Display content on a single topic. Make cards easy to scan for important information.
- donts: Don't display content on unrelated topics. Don't use cards to build gallery grids. To highlight videos and images use ``.
### CardFolderTabs
- description: Card folder tabs allow users to organize content by a certain criteria in a card layout.
- do: Use it to distribute content within a card. Use it to group card content by a specific criteria, such as status or type.
- donts: Don't use it to distribute content of a page. Use `` instead.
### CardGalleryItem
- description: Card gallery item is an interactive component that allows users to display media content and actions related to it in a grid layout.
- do: Use it to represent a content entity, such a blog post, product or event. Use it to display content that users can interact with. Use it to display content for grid layout.
- donts: Don't use it to display static media. Use `` or `` instead. Don't use it to display content in a custom layout. Use `` instead.
### Carousel
- description: Carousel is a slideshow component that allows users to cycle through a set of content items, such as images or videos.
- do: Use it to browse through visual content entities, such as images or videos. Use it to display one or several items at a time.
- donts: Don't turn on autoplay for content that users need time to read. Don't put essential information only in later slides, since users might not reach them.
### CheckToggle
- description: Check toggle allows users to make a binary choice between two states. It\`s commonly used to mark a specific item as completed or not.
- do: Use it to mark item as completed or not
- donts: Don't use it to turn the setting on or off. Use `` instead. Don't use it to select a single or multiple items. Use `` or `` instead.
### Checkbox
- description: Checkboxes allows to select single or multiple items from a list of predefined options.
- do: Use it in forms to select one or multiple items from a list of options. Use it when all options need to be displayed right away. Use it when an explicit action is required to apply a setting, e.g., Agree to terms and conditions.
- donts: Don't use it to select a single item from a list. Use `` instead. Don't use it to activate a setting or a feature. Use `` instead. Don't use it to select more than 5-10 options, use ``, `` or `` instead.
### CircularProgressBar
- description: A circular progress bar indicates the percentage of completion for a task or process with a visual indication that fills a circular track.
- do: Use to indicate progress of a task that require a long time to complete (10 seconds and more). Use to show users that their action is being processed.
- donts: Don't use circular progress bar if processing user action takes less than 10 seconds. Use `` instead.
### CloseButton
- description: Close button is an interactive element that allows users to exit an event.
- do: Use it to close pages, notifications, helpers, cards or menus. Use one close button at a time.
- donts: Don't use it to trigger any action other than close. Use `` or `` instead.
### Collapse
- description: Collapse makes content collapsible. Wrap content in `` to show and hide it with an animation, or use it to build accordions.
- do: Use it to show and hide content that users open on demand, such as advanced settings. Connect it to a visible control, such as a button or toggle, that opens and closes it.
- donts: Don't build a list of collapsible sections from scratch. Use `` instead. Don't hide content that users must read to complete a task.
### ColorInput
- description: Color input allows the user to select a color, either by using a visual color picker or by entering the HEX color code manually into the text field.
- do: Use it to specify a custom color for any item.
- donts: Don't use it to select a color from a predefined list of options. Use `` instead.
### ColorPicker
- description: Color picker allows users to select a color value by dragging the cursor inside of a color spectrum. It's a popover that should be called out via ``, `` or another component. It uses this color manipulation library:
- do: Use it to freely select any solid color. Use it to show the full spectrum of available colors to select.
- donts: Don't use it to select one color from a predefined set of colors. Use `` instead.
### ComposerHeader
- description: Composer header is a local navigation of a composer environment.
- do: Use it to navigate within a composer. Use it to display actions and data related to the composer environment, such as content state, undo actions, etc.
- donts: Don't use it in layouts other than the composer. Don't use it as a global navigation (top bar). Composer header exists together with global navigation and should be positioned right below it.
### ComposerSidebar
- description: Composer sidebar is a local navigation used to control the composer's settings panel.
- do: Use it to list the categories of composer's `` settings.
- donts: Don't use it in layouts other than the composer.
### ComposerButton
- description: Composer button as it's name suggest, is a custom button for composers tools and functions.
- do: Use it to describe a composer tool, action or a function.
- donts: Don't use it for non composer platforms.
### CopyClipboard
- description: CopyClipboard is a function mechanism that wraps other components to provide copy/paste functionality. Use it to copy urls, code snippets or similar.
- do: Use it to let users copy values they need elsewhere, such as URLs or code snippets. Show users that the value was copied, such as by changing the button text when isCopied is true. Set resetTimeout so the confirmation goes away after a short time.
- donts: Don't copy to the clipboard without a user action, such as on page load. Don't use it to display code. Use ``, which has its own copy action.
### CornerRadiusInput
- description: Corner radius inputs enable users to adjust the border radius for different elements, such as boxes or images.
- do: Use to edit border radius of elements.
- donts: Don't use to edit other interconnected values, such as margins or paddings. Use `` instead.
### CounterBadge
- description: A counter badge is a numeric indicator that shows the count of pending or unseen items that require user attention.
- do: Use to display a numeric count of unseen or pending items that require user attention, like unread messages or queued tasks. Use to reflect real-time changes in count, like items added to a cart or new errors detected.
- donts: Don't use to show the status of an item or function. Use `` instead. Don't use to label or categorize content. Use `` instead.
### CustomModalLayout
- description: Custom modal layouts are highly flexible, allowing to contain content like forms, lists, or media within a `` overlay.
- do: Use it to present a subtask, display more information or other custom content. Use it after an intentional user action and only when it is completely necessary. Because they are intrusive, modals should be used sparingly.
- donts: Don't use to display essential information or primary tasks. Use `` on the main page instead. Don't use to prevent users from taking a destructive action or to communicate short messages. Use `` instead. Don't use to preview files such as images, videos or PDFs. Use `` instead. Don't use in mobile environments. Use `` instead
### ClickableCard
- description: Clickable Card is an interactive container that acts as a clickable surface. It can be used as a single image or contain a group of elements such as text, buttons, etc...
- do: Use it to create a card layout the interacts as a button
- donts: Don't use it as a static container with interactive elements inside, use `` instead.
### DatePicker
- description: Date pickers allow users to select or enter a specific date. It's a combination of the ``, `` and `` components.
- do: Use it to select dates in the recent past or near future. Make it easier to select dates far in the past or in the future with month and year selection in the calendar (e.g., when entering a birth date or expiration date).
- donts: Don't use it to select time. Use `` instead.
### Divider
- description: Dividers are thin lines that separate content, or groups it into clear sections. They act like visual punctuation marks and make web pages easier to read.
- do: Separate content in lists and layouts. Use dividers to support visual hierarchy.
- donts: Don't overuse dividers when white space can be used instead. Don't place two dividers together without content in between.
### Dock
- description: `` is a 3×3 grid position picker. It lets users choose an alignment or anchor point relative to a container: one of four corners, four edges or the center. Use it in layout tools, for example to pin an element to a position on the screen.
- do: Use it to let users pick where an element is anchored or aligned within its container, such as a screen corner or edge. Use it when the choice is limited to the nine fixed points: four corners, four edges and the center. Disable positions that don't apply to the current element instead of hiding them, so the grid keeps its shape.
- donts: Don't use it for a choice along one axis only, such as left, center and right alignment. Use `` instead. Don't use it to set exact coordinates or offsets. Use `` for those instead.
### Drawer
- description: The `` is a mobile‑first component used to display additional options, actions, or content without navigating away from the current screen. It slides up from the bottom of the viewport and is commonly used to expand dropdown lists on mobile, act as an action sheet when opened from popovers, or present any contextual content in a mobile experience.
- do: Use it for focused, short tasks, such as choosing an option, confirming an action or making a quick edit. Make it easy to dismiss by swiping down, with a close icon or, when safe, by tapping the overlay. Keep content concise and scannable. Prioritize primary actions and key information.
- donts: Don't stack multiple drawers on top of each other or mix it with other heavy overlays. Don't hide critical information that users need to complete the task behind the drawer. Don't make closing ambiguous. Avoid situations where users feel "trapped" in the drawer. Don't overload it with complex or long flows, such as multi-step forms, dense layouts or full-page experiences.
### Dropdown
- description: Dropdowns let users select a single item from a predefined list of options.
- do: Use when users can select a single item from 5 to 10 options.
- donts: Don't use to display two mutually exclusive selections. Use `` instead. Don't use to display two to four options. Use `` instead. Don't use to display 11 or more options. Use `` or `` instead.
### DropdownBase
- description: The DropdownBase is a mechanism that allows the user to open up a dropdown layout via a specified trigger element and return a selected value for it.
- do: Use it to build custom filters. Use it to build "sort by" actions.
- donts: Don't use it to select relevant value in forms. Use standard `` instead. Don't use it to build menus. Use `` instead.
### DropdownLayout
- description: No description
- do: No do
- donts: No donts
### Dropzone
- description: Dropzone lets users drag and drop files to upload them in a specified area.
- do: Use it to upload files using drag and drop to a specified region. Use it to upload single or multiple files.
- donts: Don't use it to upload files via the native file picker. Use `` instead.
### EditableSelector
- description: No description
- do: No do
- donts: No donts
### EditableTitle
- description: Editable title allows users to change a page title on the spot. It is used as a title inside of a `` component.
- do: Use it to let users give a title to a page, such as a product, category or event detail page. Use it as a part of a ``.
- donts: Don't use it for static page titles that can't be edited, such as Inventory, Settings or Subscriptions. Don't use it outside of a `` component. Don't use it as an editable cell or title inside forms or tables. Use `` with a 'bottomBorder' border type instead.
### EmptyState
- description: An empty state is used when an app, page or section has no data to show.
- do: Show it when there's no data to display. Use it to give feedback when no search results are available. Use it when the page content fails to load or there's a technical error. Give an explanation and provide a next action.
- donts: Don't overwhelm the user with unnecessary content. Don't use it to promote new products or features. Use `` or `` instead.
### FacesRatingBar
- description: Faces rating bar allows you to rate an experience, such as an interview, a call with customer care or a doctor's appointment.
- do: Use it to display the rating of an experience. Use it to measure 'likability'. Use it to collect feedback about experiences that involve interaction with other people.
- donts: Don't use it to rate the quality of a physical or digital item. Use `` instead.
### FeatureList
- description: Feature list allows users to promote a product or service by listing down the main features and benefits. It's designed to be used in `` component.
- do: Display it in a footer area of a `` Use it to list down product features or benefits
- donts: Don't use it to list down client reviews. Use `` instead.
### FieldSet
- description: A field set wraps a group of related components in a form, has a title (legend), and can include a tooltip for extra information.
- do: Use it to provide a short title for a group of related form components. Use it to give a group title for screen reader users. Provide additional information about the group in a tooltip.
- donts: Don't use it to add a label for an individual form component. Use `` instead.
### FilePicker
- description: The file picker allows users to upload a single file at a time. The component handles the file upload via the native file browser dialog, the validation and preview of an uploaded file.
- do: Use it to upload text or media file Use it to upload single file at a time
- donts: Don't use it if you need to upload multiple files at once, use `` instead.
### FileUpload
- description: File upload allows users to upload one or multiple files at once. This wrapper opens a native upload dialog box when the user clicks a trigger.
- do: Let users upload all types of text or media files. Let users upload one or more files at once. Use it to add a file type selection to existing components like ``.
- donts: Don't use it as a standalone item. It must always wrap a trigger component. For a standalone solution, use `` instead.
### FillButton
- description: Fill button allows to add a new color swatch to an existing list of options. It's used as a building part for `` component.
- do: Use it to add a new swatch to the list of colors or gradients. Use it to call out the color picker popover. Use it to call out Media Manager to pick an image.
- donts: Don't use it as a standalone element. It should be accompanied by a list of `` elements or be a part of ``.
### FillPreview
- description: A clickable preview for colors, gradients, images and vector graphics. Mainly used as a building part for `` component, but can be used as a standalone item too.
- do: Use it to create a swatch of selectable colors, gradients or images. Use it to list available style options for the fill.
- donts: Don't use it to make large swatches. When a big preview is required, use `` instead.
### FloatingHelper
- description: Floating helper is a popover that points to an element on the page to introduce a new or updated feature. It can hold a title, body text, an image and an action, and users close it with its close button.
- do: Use it to introduce a new or updated feature next to the element it describes. Keep the title and body short, and add one action at most. Show one floating helper at a time.
- donts: Don't use it for information users need to complete a task. Use `` instead. Don't use it to explain how a control works. Use `` or `` instead.
### FloatingNotification
- description: Notification informs users about the status change in application. Floating notification is used as a temporary overlay element or inline element within cards.
- do: Use it to provide contextual feedback on the outcome of user action. Use it to notify users about a happened change in the application. Display notifications inside modals as a temporary overlay. Place as a section message first in the section that it applies to.
- donts: Don't use it to display system-wide alerts. Use `` instead. Don't place an application level messages. Use `` instead.
### FormField
- description: Form fields are labels used to tell the user what they need to select or enter in the field of a form. They can indicate if a field is mandatory and can include a tooltip to provide more information.
- do: Use it to add a label to the field to tell the user what info they need to enter or select. Mark required fields as mandatory. Provide additional information about the form element in a tooltip.
- donts: Don’t use it as a title for sections or groups of elements. Use the appropriate `` component instead.
### FunnelChart
- description: A funnel chart displays values as progressively decreasing proportions, for example how many visitors reach each step of a purchase flow. The badge between two steps shows the next value as a percentage of the current one. It needs at least 2 data items.
- do: Use it to show how many users pass through each step of a sequential flow, for example from visits to orders. Use it to point out the step where users drop off the most.
- donts: Don't use it to compare independent values that aren't steps of one flow. Use `` instead. Don't use it to show how a value changes over time. Use `` or `` instead.
### GoogleAddressInput
- description: No description
- do: No do
- donts: No donts
### GooglePreview
- description: Google preview allows users to preview how the website appears in Google search results. It is frequently used in SEO settings' panels.
- do: Use it to illustrate how a website appears on Google search results. Use it to visualize changes in SEO settings.
- donts: Don't use it to visualise how information is displayed when the URL address is shared on social media platforms (use `` instead).
### Heading
- description: Headings are titles for the main sections of a page. They help users understand what a page or section is about at a glance.
- do: Use headings to describe each section on a page. Keep the heading text short and clear. Keep the entire heading text visible at all times. Make sure it doesn't get truncated with an ellipsis. Follow a sequential, descending heading order, and don't skip levels.
- donts: Don't use headings for paragraphs of text or titles with multiple sentences. Use `` instead. Don't use headings for content that isn't a heading.
### Highlighter
- description: Highlighter highlights the parts of its text that match the `match` string, and keeps the structure of its child elements.
- do: Use it to highlight the text that matches what users typed, such as in search results or dropdown options. Use it to show users why an item matches their search.
- donts: Don't use it to emphasize static text. Use `` with the weight prop instead.
### HorizontalTimeline
- description: HorizontalTimeline is used to demonstrate the progress of passive events that a person watching it has no effect on.
- do: Use it to demonstrate the progress of server states. Use it to show task SLA status.
- donts: Don't use it as part of onboarding flow, use `` component instead. Don't use it to show a long history of events, use `` component instead.
### HorizontalScroll
- description: HorizontalScroll is a mechanism that enable scroll for different components like Tabs, Buttons, Tags, etc...
- do: Use it to for interactive components. Use it when there's not space to show all the items.
- donts: Don't use it for promotional content, use `` instead.
### IconButton
- description: Icon buttons highlight actions that users can take, used in compact or crowded layouts.
- do: Add tooltip labels to icon buttons using a ``. Only use icon buttons for low-emphasis actions. Use them in compact or crowded layouts. Make sure the meaning of the icons are simple and unambiguous.
- donts: Don't use them for secondary actions if there's enough space to show the full label. Use `` or `` instead.
### Image
- description: Images communicate product information to users with visuals.
- do: Use them to display images like product thumbnails.
- donts: Don't display photos of users. Use `` instead. Don't display images that can be uploaded, updated or removed. Use a built-in `` solution instead.
### ImageViewer
- description: Image viewers let users display images with built-in functions like upload, update and remove.
- do: Use them to upload images, such as event covers. Use them to display images that can be updated or removed.
- donts: Don't use them to display images that aren't interactive. Use static `` instead.
### InfoIcon
- description: The `` provides additional information when hovering over the icon. It's used in multiple components, and sometimes by itself, next to various actions or features.
- do: Use it when features can be explained in one sentence.
- donts: Don't use it when the feature requires a knowledge article to be explained. Use 'read more' instead.
### Input
- description: Inputs let users enter short values into a text field. It can be used for forms and tables, or to build other form components like `` or ``.
- do: Use it to insert names, titles, addresses, and other areas where users will enter short bits of text. Use it to build custom input fields.
- donts: Don't use it to insert long paragraphs. Use the `` component instead. Don't use it as a search input. Use the `` component instead.
### InputArea
- description: Input areas let users insert long text values. The large size of the field indicates that a user is expected to insert at least a few sentences.
- do: Use it to insert multiple lines of text.
- donts: Don't use it to insert short text values. Use `` instead.
### InputShell
- description: Input shell is an atomic input component. It can replace the regular `` or `` components when you need a value that isn't a string, such as in a font dropdown.
- do: Use `` to preview non-string values.
- donts: Don't use it to show simple string values. Use `` or `` instead.
### InputWithLabel
- description: InputWithLabel allows you to insert short text values in a field with a built-in label. It's constructed by wrapping a regular `` component with ``.
- do: Use it to insert text values in the Wix Premium checkout form.
- donts: Don't use it in Wix Business Manager applications, use `` with `` instead.
### InputWithOptions
- description: No description
- do: No do
- donts: No donts
### Layout
- description: Layout is a wrapper component that allows users to arrange children items in a grid of columns and rows. It's based on the CSS grid.
- do: Use it to structure content inside of a `` . Use it to organize form fields inside of a `` .
- donts: Don't use it to structure a list of items. Use `` instead.
### LinearProgressBar
- description: A linear progress bar indicates the percentage of completion for a task or process with a visual indication that fills a horizontal track.
- do: Use it to indicate progress of a task that requires a long time to complete (10 seconds and more). Use it to show users that their action is being processed.
- donts: Don't use it if processing user action takes less than 10 seconds. Use `` instead. Don't use it to show the steps of a multi-step flow. Use `` instead.
### ListItemAction
- description: ListItemAction component is used to build menu like components.
- do: Use it to build navigation menus
- donts: Don't use it for selection based menus
### ListItemEditable
- description: ListItemEditable is an internal editable component which is used to build dropdown or menu like components. Usually this item should not be used by consumers, though custom options builder is exposed for usage with DropdownBase.
- do: No do
- donts: No donts
### ListItemSection
- description: List item section allows you to group or divide list options or actions.
- do: Use it to build Dropdown, Multiselect, Search dropbox values or custom lists.
- donts: Don't use it as standalone component for general layouts. Use SectionHeader instead.
### ListItemSelect
- description: List Item Select represents a single option of any select component. It's highly configurable and can appear in Dropdown, Multiselect or Search components.
- do: Use it to build Dropdown, Multiselect, Search dropbox values or custom lists.
- donts: Don't use it as standalone component for general layouts. Use SectionHeader instead.
### ListItemSelectIcon
- description: `` is an icon-only selectable list item designed for use in icon pickers, formatting toolbars, and dropdown menus where visual options can be represented by icons alone.
- do: Use it inside `` with listItemSelectIconBuilder for consistent option rendering. Use it for options that are universally recognizable by icon alone, such as alignment, bold and italic, or shapes. Provide a `` when the icon's meaning isn't immediately obvious, so users can hover to learn what each option represents.
- donts: Don't use it when the option needs a text label to be understood. Use `` instead. Don't mix `` and `` in the same list. They have different visual footprints and serve different use cases. Don't pass interactive elements, such as buttons or links, as the icon prop. The entire component is already clickable.
### LiveRegion
- description: Live region is a mechanism that broadcasts a message for screen reader users to inform them about the change in the page layout or the status.
- do: Use it to inform users with visual impairments about change in page content Use it to inform users with visual impairments about page status change without moving users' focus
- donts: Don't use it when triggered action moves user focus to another element, for example to a newly created item. Use `` when user focus remains where it is, but users must be aware of the changes that happened on the page. Don't use it to announce the opening of menus, modals or notifications. These types of announcements are a built-in definition of components. Don't use it to announce dynamic content that's not critical. Avoid adding unnecessary noise for assistive technologies.
### Loader
- description: Loader is used to show users when an action is being processed.
- do: Use to show that the requested action has started and will be completed soon, like changes on a page being saved. Use when task completion time is unknown. Place in the vertical and horizontal center of a layout.
- donts: Don't use for an initial load of page content when you know how the final result will look. Use `` instead. Don't use for processes that have a detected completion time or require a long time to complete. Use `` or `` instead. Don't show multiple loaders on the page at a time. Use `` instead.
### MarketingLayout
- description: Marketing layout is a standardized card-like layout for encouraging users to take an action. It is quicker and easier to use than a customizable card.
- do: Use it to promote existing features or products that users could benefit from. Wrap it in a ``, which provides a white background.
- donts: Don't use it to create lists. Use `
` instead.
### MarketingPageLayout
- description: Marketing page layout presents a product and its key features for first time users.
- do: Use it to onboard users during their first visit. Use it to promote a product the user may not be aware of.
- donts: Don't use it to promote a feature within a product. Use `` instead.
### MarketingPageLayoutContent
- description: Marketing page layout content is an internal component used to display content of ``.
- do: Use it as a building part of ``. Use it to layout promotional content inside of a page.
- donts: Don't use this component alone. Always use it within ``. Don't use it to layout promotional content inside of ``. Use `` instead.
### MediaOverlay
- description: Media overlay is a container that allows users to place any content on top of a media such as an image or a video.
- do: Use it to place a badge, text or other content on top of a media. Use it to reveal duration or other static data on media element hover. Use it to reveal related actions on media element hover.
- donts: Don't use it to display plain images. Use `` or `` instead.
### MessageBoxFunctionalLayout
- description: No description
- do: No do
- donts: No donts
### MessageBoxMarketerialLayout
- description: No description
- do: No do
- donts: No donts
### MessageModalLayout
- description: Message modals display short messages letting users confirm or cancel an action before moving forward. They're used inside `` overlays.
- do: Get confirmation before destructive or irreversible actions. Update users about important changes, such as updated terms and conditions. Inform users that selected features are Premium and upgrading is required. Use it after an intentional user action and only when it is completely necessary. Because they are intrusive, modals should be used sparingly.
- donts: Don't show more detailed custom content. Use `` instead. Don't preview files like images, videos or PDFs. Use `` instead. Don't use them in mobile environments. Use `` instead.
### MobilePreviewWidget
- description: Mobile preview widget displays custom content within a mobile device frame. Use it to illustrate how a website, design or other content appears on a mobile screen.
- do: Use it to illustrate how content (website, design, etc.) appears on a mobile device. Use it next to settings or design controls so users can preview their changes as they make them.
- donts: Don't use it to illustrate how content appears on the web without a device frame. Use `` instead. Don't use it to illustrate how content appears on a browser. Use `` instead. Don't use it to preview what information will be displayed when users share a specific URL on a social media platform. Use `` instead.
### Modal
- description: Modal is the overlay that appears as the background for all types of modal layouts. It is triggered by a user's action and is a container for components like `` and ``.
- do: Use it as the background for all types of modal layouts. Use it only when it is completely necessary. Because they are intrusive, modals should be used sparingly.
- donts: Don't use modals without any intentional user action.
### ModalMobileLayout
- description: Use modal mobile layout inside a `` to display content on mobile screens. You can add a title and a footer with actions related to the content.
- do: Use it for modals on mobile screens. Make the title and footer sticky when the content scrolls, so they stay in view. Use the fullscreen layout when the content is long.
- donts: Don't use it on desktop screens. Use `` or `` instead. Don't hide the close button unless the footer gives users another way to close the modal.
### FullScreenModalLayout
- description: `FullScreenModalLayout` is a mobile first layout used for push screens and full screen modals inside native looking flows. It takes over the whole viewport, with an optional header, scrollable content, and an optional sticky footer.
- do: Use for focused tasks that need the user's full attention (create, edit, review). Use for flows that feel like a new screen in the app, not just a small dialog. Use the `` for page level actions like back, close, save, done. Use the `` for primary actions that should always stay visible (for example "Save", "Continue").
- donts: Do not use on desktop. Use ``, ``, `` instead Do not stack multiple full screen modals on top of each other. Do not turn it into a generic container for everything. If content feels like a long page, consider using a regular page instead.
### ModalPreviewLayout
- description: Modal preview layout displays files, such as images, videos or PDFs, inside a `` overlay. Its header strip holds a title, actions and a close button, and previous and next buttons let users move between several items.
- do: Use it to preview files, such as images, videos or PDFs. Add actions users can take on the file, such as print or download, to the header. Use the previous and next buttons to let users browse several files in one modal.
- donts: Don't use it for forms or other custom content. Use `` instead. Don't use it to confirm actions or show short messages. Use `` instead.
### ModalSelectorLayout
- description: No description
- do: No do
- donts: No donts
### MultiSelect
- description: Multiselect allows users to enter and display multiple keyword tags.
- do: Use it when the site owner needs to enter multiple keywords like names, emails, countries, etc. Use it as a tag input.
- donts: Don't use it to insert tags in combination with free text. Use `` instead.
### MultiSelectCheckbox
- description: MultiSelectCheckbox allows to select multiple items from a predefined list of options.
- do: Use it to select multiple items from a list of options. Use it as a filter for data sets.
- donts: Don't use it to select a single item only. Use `` instead. Don't use it if user should be able to add new values to the list as well. Use `` instead.
### NestableList
- description: Nestable lists let users sort their list items into sub-levels using drag and drop.
- do: Organize items into sub-levels and categories. Create lists that users can add to.
- donts: Don't show static lists. Use `` or `
` instead. Don't use them for lists that span across multiple pages.
### NestableListBase
- description: No description
- do: No do
- donts: No donts
### Notification
- description: Notification is a sticky toast bar that appears at the top of the page. It alerts about application status changes.
- do: Use it to notify users about status change on the page after user performed an action. Use it to share a back button when a user navigated outside the main application.
- donts: Don't use it to provide application errors that aren't caused by the user action. Use `` instead. Don't use it inside of other components such as modals or cards. Use `` or `` instead.
### NumberInput
- description: Number inputs allow users to enter and edit numeric values in a single line input field. The value can be inserted using the keyboard or incremented using the arrow controls.
- do: Use it to enter custom numeric values, e.g., amount, price, quantity. Use it to adjust values by a specific amount, e.g., the number of items in a shopping cart.
- donts: Don't use it to enter numerals that don't indicate quantity or measurements, e.g., phone numbers or postal codes. Use regular `` instead. Don't use it to enter dates and times. Use `` or `` instead.
### NavigationToast
- description: Navigation toast is a toast with a single link that takes users to a related page or place, such as their settings or back to the top of a list. It stays on screen until users dismiss it, unless you set a `duration`.
- do: Provide a clear action that's explicit and guides users to the intended destination, such as "Go to Settings" or "Scroll back to top". Only use the toast to direct users to environments or actions that are immediately relevant to their current context. Use short, actionable text for the title and description.
- donts: Don't use it as a notification. Use `` instead. Don't use it as the primary navigation element of your app. Use it only as a supplementary guide. Don't leave the toast displayed indefinitely if it's no longer relevant or actionable. Don't add unrelated or out-of-context actions to the toast.
### OTPInput
- description: OTP input lets users enter a short numeric one-time code, shown one character per slot, for example to confirm an email address or to log in with two-step verification. It's one input, so a code suggested by the phone keyboard or pasted from a message fills it at once, and it reports when the code is complete, so a confirm button isn't needed.
- do: Use it for short numeric codes, such as a code sent by SMS or email. Wrap it in a `` to add a label and a status message. Verify the code when it is complete, and show the result with the status of the field. Clear the code with `clear()` on the ref when it is wrong, so the user can start again.
- donts: Don't use it for long or free-form text. Use `` instead. Don't use it for letters or symbols. It accepts digits only. Don't add a confirm button just to send the code, unless the flow needs one.
### Page
- description: Use the page component to build the structure of each page. It's designed for Business Manager applications but can be customized for other use cases too.
- do: Use it to build all standard Business Manager pages. Customize it as you need for other use cases.
- donts: Don't use it to build marketing pages. Use dedicated `` instead.
### Pagination
- description: Pagination splits up large amounts of content into multiple pages.
- do: Use it to let users navigate between content on multiple pages. Use it to show small chunks of content at a time.
- donts: Don't use it to navigate between content on the same page. Use `` instead. Don't use it to illustrate progress in a task or process. Use `` instead.
### Palette
- description: Palette displays a set of colors.
- do: Use it to represent a set of solid colors, gradients or images. Use it to display available styles to choose from.
- donts: Don't use it to select a fill option from a set. Use `` instead.
### Popover
- description: Popover is a structural component used for showing and positioning pop-ups and tooltips over a given element. It uses Popper.js as engine.
- do: Use it to build custom floating content attached to an element when no dedicated component fits. Close it when users click outside it or press Escape, with the onClickOutside and onEscPress props.
- donts: Don't use it for short labels or explanations. Use `` instead. Don't use it for a list of actions. Use `` instead. Don't use it to introduce new features. Use `` instead.
### PopoverMenu
- description: A popover menu displays a list of actions when a user either clicks or hovers on a trigger element.
- do: Display a list of actions when there is not enough space to expose them right away. Display secondary actions that are hidden to the user until clicked or hovered on.
- donts: Don't use it to explain the functions of an item. Instead, use `` or ``. Don't use it to promote new features. Instead, use ``. Don't use it to display a list of options. Instead, use ``.
### PreviewWidget
- description: Preview widget allows users to preview how content appears on a separate window. It is often used to illustrate how designs look on the web, without putting it into the frames of specific devices.
- do: Use it to illustrate how content (website, design, etc.) appears on the web.
- donts: Don't use it to illustrate how content appears on a browser. Use `` instead. Don't use it to illustrate how content appears on a mobile device. Use `` instead. Don't use it to preview what information will be displayed when users share a specific URL on a social media platform. Use `` instead.
### Proportion
- description: Proportion is a wrapper that enforces a fixed aspect ratio on its child. It fills the width of its container, sets the height from the ratio and stretches the child to fill that area, so tiles and media keep their shape at any size.
- do: Use it to keep images, videos and other media tiles at a consistent ratio in responsive grids. Use it with children that stretch to fill their container, such as ``, `` or ``.
- donts: Don't use it for content that should take its natural height, such as text or forms. Don't wrap `` in it. Use its own aspectRatio prop instead.
### PulseAnimation
- description: `` is a wrapper with a predefined pulse animation. It emphasizes UI elements with a pulse motion.
- do: Use it to draw attention to one element that needs the user's action, such as the entry point to a new feature. Stop the animation once users interact with the element.
- donts: Don't animate several elements on the same screen at once. Don't wrap more than one child in it.
### RadarChart
- description: Radar chart allows users to display how a measured item is effective in different numerical parameters. It can indicate it's relative influence to business, marketing campaigns, sales and similar criteria.
- do: Use it to visualise influence of multiple data parameters. Use it to display performance in multiple areas.
- donts: Don't use it to compare different data points. Use `` or `` instead.
### Radio
- description: A radio represents an item in a single selection list. It is used as an internal part of ``, but can be used as a standalone item in a custom form or layout.
- do: Use it to recreate `` in a custom design.
- donts: Don't use it to display a regular list of single selection options. Use `` instead.
### RadioGroup
- description: Radio groups (radio buttons) allow users to choose a single item from a list of options.
- do: Allow the user to select a single item from a short list of 2 to 5 options. Use it to show all available options. Have a preselected option where possible, or add a neutral option, such as "None" or "All".
- donts: Don't use it when multiple options can be selected. Use the `` component instead. Don't use it for lists of more than 5 options. Use the `` or `` components instead.
### Range
- description: Range allows users to enter a range of values or dates. It's a container that wraps and merges two input fields such as `` \` or ``.
- do: Use it to specify a range of dates Use it to specify a range of numeric values such as duration
- donts: Don't use it to merge dependent fields, i.e. price input with currency selection. Use `` to place inputs in 12px proximity to one another.
### RichTextInputArea
- description: Rich text input areas let users insert and format long sections of text, and add lists and links.
- do: Let users add multiple sentences or paragraphs. Let users format the text they write.
- donts: Don't use for text inputs that are a single line. Use `` instead.
### Search
- description: Search lets users enter a keyword or phrase into a text field to find relevant results.
- do: Use it to find relevant information on a page. Use it to filter data in a table. Use it to find relevant pages for easy navigation.
- donts: Don't use it to search addresses. Use `` or `` instead. Don't use it to select multiple items. Use `` or `` instead.
### SectionHeader
- description: Section headers are used to group together content or items under a unifying title. They help users understand what the following section is about.
- do: Use it in a `` to introduce a new section of related content. Use it in an `` or a `` to group together related items.
- donts: Don't use it inside of a ``. Use `` instead.
### SectionHelper
- description: Section helper is a notification message that allows us to communicate with users and provide feedback anywhere on the page.
- do: Use it to provide application-level status updates; for example, to inform the user that their payment method has expired. Use it to share the status of application sections; for example, to inform users that settings are turned on in a way that they might not prefer.
- donts: Don't use it for status updates after users perform actions, like validation errors and success messages. Use `` instead.
### SegmentedToggle
- description: Segmented toggles are sets of buttons that allow users to choose from multiple options. Only a single option can be selected at a time.
- do: Allow users to switch between alternative views of data, or to change the status of an item. Allow users to toggle between options.
- donts: Don't organize content within a page with them. Use `` instead. Don't let users select multiple options at once. Use `` instead.
### SelectableAccordion
- description: Selectable accordion is a list of interactive items, which show and collapse additional content when they are selected and deselected.
- do: Use it to organize complex settings by grouping them into collapsible sections. Use it to show additional information or settings only when an item is selected.
- donts: Don't use it to display a single item. Use `` mechanism instead. Don't use it for items that have no additional information to expand. Use `` or `` instead.
### Selector
- description: No description
- do: No do
- donts: No donts
### SelectorButton
- description: Selector button triggers a selection panel or modal, such as a font picker or link settings, from a settings panel. Its text can show the current selection.
- do: Use it as an entry point to a selection list in an additional panel or modal. Use it to prompt users to open link selection or font picker panels. Show the selected value in the button text after users make a selection.
- donts: Don't use it as a primary call to action. Use `` instead. Avoid using obscure placeholder text.
### SelectorList
- description: Selector lists allow users to select one or multiple items within a data set. They have built-in search and loading behaviors.
- do: Use when users can select one or multiple items in data sets. Use when there's a long list of items and searching is helpful. Use inside parent containers such as a ``.
- donts: Don't use them for lists that can be edited by users. Use `` instead. Don't use them for data sets that need to be displayed in rows and columns. Use `
` instead.
### SidePanel
- description: Side panel is a component that presents supplementary information, navigation options, or controls alongside or overlaying the main content of the page.
- do: Display supplementary actions or settings that affect the main page content, such as data filters. Display tools that can be used on the page. Provide more details in context. Let users interact with the main page while the side panel is open.
- donts: Don't display content while blocking interactions on the main page. Use `` instead.
### Sidebar
- description: No description
- do: No do
- donts: No donts
### SidebarBackButton
- description: No description
- do: No do
- donts: No donts
### SidebarDivider
- description: No description
- do: No do
- donts: No donts
### SidebarDividerNext
- description: SidebarDividerNext allows to group a list of options. This component is part of SidebarNext component.
- do: Use it to build `` navigation
- donts: Don't use it as a stand alone component
### SidebarHeader
- description: No description
- do: No do
- donts: No donts
### SidebarHeaderNext
- description: SidebarHeaderNext displays a key information of site or other CMS application. This component is part of SidebarNext component.
- do: Use it to build `` navigation
- donts: Don't use it as a stand alone component
### SidebarItemNext
- description: SidebarItemNext is a navigation action that reflects a single option in sidebar navigation list.
- do: Use it to build `` navigation
- donts: Don't use it as a stand alone component
### SidebarNext
- description: SidebarNext is a major navigation element for Business Manager or Account level applications.
- do: Use it to create a navigation between Business Manager applications. Use it to create a navigation in various content management systems.
- donts: Don't use it to tab between sections. Use `` or `` component instead.
### SidebarSectionItem
- description: No description
- do: No do
- donts: No donts
### SidebarSectionTitle
- description: No description
- do: No do
- donts: No donts
### SidebarSubMenuNext
- description: SidebarSubMenuNext allows to put a list of options into a collapsible group. This component is part of SidebarNext component.
- do: Use it to build `` navigation
- donts: Don't use it as a stand alone component
### SidebarTitleItemNext
- description: SidebarTitleItemNext allows to put a list of options into a group with a title. This component is part of SidebarNext component.
- do: Use it to build `` navigation
- donts: Don't use it as a stand alone component
### Skeleton
- description: No description
- do: No do
- donts: No donts
### SkeletonCircle
- description: No description
- do: No do
- donts: No donts
### SkeletonGroup
- description: Placeholder for filling up screen using skeleton items, usually for when some async operation is ongoing.
- do: Use it to show the shape of content while it loads. Build it from ``, `` and `` so it matches the layout of the content it replaces. Match the skin to the background it renders on.
- donts: Don't use it for actions that take an unknown amount of time, such as saving changes. Use `` instead. Don't use it when you don't know the layout of the content that loads. Use `` instead.
### SkeletonLine
- description: No description
- do: No do
- donts: No donts
### SkeletonRectangle
- description: No description
- do: No do
- donts: No donts
### Slider
- description: Slider is an input field that enables our users to select a value within a given number range. It's handy when a user needs an approximate but not a precise value.
- do: Use it to adjust settings, such as opacity, brightness or volume. Use it to specify an accepted range of values, such as price range. Use it to control color opacity.
- donts: Don't use it to select a value within an extremely small range (e.g., 1-3). Use `` or `` instead.
### SocialButton
- description: Social button allow users to share content or follow social media channels.
- do: Use it to encourage users to share content.
- donts: Don't use it to navigate or modify the content. Use `` instead. Don't use it as a static indicator. Use General Icons instead.
### SocialPostPreview
- description: Social Post Preview allows users to preview a post they are about to publish on Facebook or Instagram.
- do: Use it when site owners need to preview how their social media post will be displayed specifically on Facebook or Instagram. Use it to visualize real-time changes in post content.
- donts: Don't use it to illustrate how content appears on social media platforms other than Instagram or Facebook. Use `` instead. Don't use it to illustrate how content appears on a browser. Use `` instead. Don't use it to illustrate how content appears on a mobile device. Use `` instead. Don't use it to display how a webpage appears on Google search results (use `` instead).
### SocialPreview
- description: Social Preview allows users to see what information will be displayed once the URL address is shared on social media platforms.
- do: Use it when the site owner needs to preview how page information will be displayed on social media.
- donts: Don't use it as any other kind of preview for user-generated content. Don't use it instead of the GooglePreview component. Don't use it as an image preview.
### SortableGridBase
- description: No description
- do: No do
- donts: No donts
### SortableListBase
- description: No description
- do: No do
- donts: No donts
### SparklineChart
- description: Sparkline chart is a tiny chart that provides a visual representation of how a metric changes over time. It has no axes or labels, so use it next to a key figure to show the trend at a glance.
- do: Use it to show how a single metric changed over time at a glance. Use it next to a key figure, for example in a summary card or a statistics widget. Use the highlighted area to draw attention to a specific period, such as the selected date range.
- donts: Don't use it when users need to read exact values or compare several series. Use `` instead. Don't use it to show only the direction or size of a change. Use `` instead. Don't show it on its own. Add the current value and a label so users know which metric the line represents.
### StackedBarChart
- description: A stacked bar chart shows how a total splits into two values across a set of categories, such as months or quarters. Use it to compare both the totals and their breakdown, for example revenue from subscriptions and one-time purchases per month. **Note:** this component is still a work in progress and its API may change.
- do: Use it to compare totals across categories or time periods when each total is made of two parts. Use it when the split inside each bar matters as much as the total, for example new and returning customers per quarter.
- donts: Don't use it for a single value per category. Use `` instead. Don't use it to show how one measured item performs across several parameters. Use `` instead.
### StarsRatingBar
- description: A star rating bar allows the user to rate the quality of an item or an experience, such as a purchased product, completed service or received meal from a restaurant.
- do: Use it to collect feedback about the quality an item or a service. Use it to display the rating of an item or a service.
- donts: Don't use it to rate the experience with an item or service on an emotional level, use `` instead
### StatisticsWidget
- description: Statistics widget displays a row of key figures, each with a short explanation. It shows up to 5 items, each with a value, a description and the change in percent since the last period.
- do: Use it to summarize key metrics such as revenue, orders or visits at the top of a dashboard or report. Use it to show how each metric changed since the previous period. Keep descriptions short and put longer explanations in the info icon tooltip.
- donts: Don't pass more than 5 items. The widget renders only the first 5. Don't use it to show how a single value changed over time. Use `` or `` instead. Don't use it for a standalone change indicator in text or a table cell. Use `` instead.
### StatusIndicator
- description: A status indicator highlights the status of UI elements with an explanatory message that's displayed in a tooltip. It's an internal component of various form inputs.
- do: Use it to provide information about component status in compact layouts, where providing it below the component is not possible.
- donts: Don't use it as a standalone item to indicate loading for lists or layouts. Use `` instead.
### StatusToast
- description: A status toast notifies users about a status change in an application.
- do: Use it to provide contextual feedback on the outcome of user action. Use clear language and provide an actionable next step when applicable. Provide one main action only (e.g., "Dismiss" or "Retry") to avoid complexity. Use it to communicate status changes even when the user is inside a modal.
- donts: Don't add more than one action. Don't use it for application-level messages. Use `` instead. Don't display identical toasts repeatedly. If an error persists, try a single persistent notification. Don't use it as a navigation control between pages. Use `` instead.
### Stepper
- description: Stepper displays the path a user needs to follow to complete a process.
- do: Use it to divide a complex form or a process into a sequence of steps. Use it to let users navigate across different steps.
- donts: Don't use it to display users' location on a website. Use `` instead. Don't use it to split up large amounts of data into multiple pages. Use `` instead. Don't use it for static progress indication. Use `` instead.
### Swatches
- description: Swatches allows to display a list of predefined color options to choose from.
- do: Use it to select a single color from a predefined color palette. Use it to display solid color options. Use it to create a list of color options when used with ColorPicker.
- donts: Don't use it to display gradient or image fill options. Use `` instead. Don't use it to select a custom color, use `` instead.
### Table
- description: Table is a component used to display data in rows and columns. It organizes information in a way that is easy to scan.
- do: Use it to organize and display information from a dataset. Use it to display data for comparison and analysis.
- donts: Don't use it to build reordable lists of data. Use `` instead. Don't use it as a replacement for a spreadsheet. Don't use it in Business Manager - use Patterns (Cairo) table instead.
### TableActionCell
- description: Table action cell is a built-in solution that displays actions inside of table cells. The primary action is displayed as a button, while secondary actions are displayed either as multiple icon buttons or listed in a popover menu. Component should be rendered in the last column of a data row.
- do: Use it to display actions that a user can take on a specific table row. Render it in the last column of a table row. Group similar items together using dividers in popover menu for easy readability.
- donts: Don't use it to display single or multiple actions directly on a page or a widget. Use standard `` instead.
### TableListHeader
- description: Table list headers are used to provide column titles for custom list layouts.
- do: Provide column titles for data lists.
- donts: Don't divide `` content into sections. Use `` instead.
### TableListItem
- description: A table list item is a single row of a table or a list, that allows users to scan and compare sets of data. These sets can be a list of similar items, like products, posts or contacts.
- do: Use this component for a simple list when a `
` is too complex. Group similar items together for improved readability. Organize important information for users.
- donts: Don't create tables with multiple actions like filtering, bulk operations and column sorting. Build a `
` instead. Don't build drag and drop lists, a `` is a better option for this.
### TableToolbar
- description: Table toolbars allow users to organize their table title, filters, and actions into 2 containers: left and right.
- do: Use it to display the title of the table. Use it to display and organize filters. Use it to display and organize bulk actions.
- donts: Don't use it to display the applied filters list. Use `` instead.
### Tabs
- description: Tabs enable users to navigate between different content sections on the same page, card, or a panel.
- do: Use it to organize multiple content sections within the same context. Use it to enhance usability by grouping information or forms into smaller, easily digestible parts. Use short and descriptive tab titles.
- donts: Don't use it to group unrelated content. Don't use it to navigate to other pages. Use ``, `` or links instead. Don't use it to show the path users need to follow to complete a process. Use `` instead.
### Tag
- description: A tag is a label used to categorize content or display an active selection that will be applied to a product or service.
- do: Use it to label, categorize or organize content using descriptive keywords Use it to visualize selected values
- donts: Don't use it to display a number of items. Use `` instead. Don't use it to indicate status of an item. Use `` instead.
### TagList
- description: Tag lists are groups of tag and button components. They show active keywords or filters applied to a data table.
- do: Display a summary of applied filters in a table. Control the applied filters individually or all at once.
- donts: Don't use tag lists outside of the `` component. Don't use tag lists to indicate the status or category of an item. Use `` instead.
### TestimonialList
- description: Testimonial list allows users to promote a product or service by listing down user reviews or testimonials. It's used in `` component.
- do: Display it in a footer area of a `` Use it to list down testimonials about a product or service
- donts: Don't use it to list down product features or benefits. Use `` instead.
### Text
- description: Text is a typography component used to create a wide variety of content including guidance, information, descriptions, labels and more.
- do: Use it to display text paragraphs formed from a single sentence, or multiple sentences. Use it to display form element values and labels.
- donts: Don't use it as a title for a section or a widget. Use `` instead. Don't use it to highlight status, use `` instead.
### TextButton
- description: Text buttons communicate low-emphasis actions that users can take.
- do: Use it for optional actions on a page or a widget. Use it to navigate to another page. Use it to display a large list of optional actions.
- donts: Don't use it for primary or submit actions. Use a regular `` instead.
### ThemeProvider
- description: No description
- do: No do
- donts: No donts
### Thumbnail
- description: Thumbnails are used to display selectable items.
- do: Use it for selecting one or more items from a list of options. Use it when selectable items need graphics or images. Use it to build gallery selections.
- donts: Don't use it to switch between alternative options or views. Use `` or `` instead. Don't use it to display images. Use `` instead. Don't use it to distribute content within a page. Use `` instead.
### TimeInput
- description: Time inputs allow users to to enter or select a specific time value.
- do: Use time input to select a specific time. For example, to set an event start time, schedule an appointment, or set an alarm.
- donts: Don't use it to specify duration. Use `` instead.
### TimeTable
- description: No description
- do: No do
- donts: No donts
### Timeline
- description: Timeline displays a vertical list of past events in a chronological order.
- do: Use it to log and illustrate a history of events (newest on top, oldest at the bottom). Use it when the list of events is actionable (e.g., user can view event's documents).
- donts: Don't use it to demonstrate the progress of server states or to show task SLA status. Use `` instead. Don't use it as part of an onboarding flow. Use `` component instead.
### Toast
- description: No description
- do: No do
- donts: No donts
### ToggleButton
- description: Toggle button allows users to switch between states or trigger actions through clicking or selection, and is commonly used in toolbars.
- do: Use it to build composer actions like Undo and Redo. Use it in toolbars for actions like bolding or aligning text. Use it as a tab to navigate in a composer interface. Use it in main layouts to enable users to switch between two states.
- donts: Don't use it for regular form actions like Save or Cancel. Use `` instead. Don't use it to turn settings on/off. Use `` instead.
### ToggleSwitch
- description: Toggle switch turns settings on/off. It lets users switch between two mutually exclusive states.
- do: Use it to turn a state, setting, or function on or off. Use it to activate or deactivate something immediately.
- donts: Don't use toggle switch when states aren't mutually exclusive. Use `` instead. Don't require users to click on "Save" or "Submit" for toggle switches to take effect. Don't use it in place of buttons.
### Tooltip
- description: Tooltips provide additional explanation on how a specific element functions. A user can trigger a tooltip by mouse hover, keyboard focus or touch.
- do: Give additional information about interactive controls. Describe or label non-interactive elements, such as icons or images. Provide labels to ``. Use 'aria-describedby' prop to connect the tooltip's content to its trigger element for assistive technologies.
- donts: Don't use it to explain disabled components, since keyboard and screen reader users can't access it. Instead, use `` or ``. Don't use it to provide critical information. Instead, use `` or ``. Don't use it to provide lengthy information. Instead, use `` in the main layout. Don't include interactive elements, such as ``, in the tooltip's content, since keyboard and screen reader users can't access them.
### TopBanner
- description: Banners let's user know about ongoing promotions or marketing deals on their site.
- do: Use it to promote premium related offers or market features under premium plans. Use it with short and clear content. Provide a clear action that user can take with "action" property. Allow users to dismiss it.
- donts: Don't use it as a notification, to inform user about system status changes. Use `` instead. Don't use it with too much text. The component can support multiple lines, but it will cover content under it and take too much attention.
### Transition
- description: Transition is a wrapper that allows animations of other components.
- do: Use it to animate components that need a visual explanation of their origin or termination. For example tooltip appearance animation. Use it for animated transitions between object states to provide clarity of change.
- donts: Don't use it to animate interface elements for sake of effect. Don't use it for idle animations, like loading spinner.
### TrendIndicator
- description: Trend indicator shows a percentage-based positive or negative trend. Use it next to a metric to show how it changed compared to a previous period.
- do: Use it next to a metric to show how it changed compared to a previous period. Use it in tables and summary cards where several trends are compared at a glance.
- donts: Don't use it to display a whole statistic with its title and value. Use `` instead. Don't use it for values that aren't a change, such as totals or shares.
### VariableInput
- description: Variable input allows you to display `` components in between plain text. Each tag represents a known variable. Input recognizes predefined text strings and matches them with an assigned variable when input loses focus (on blur).
- do: Use it to automatically generate a message or a value that includes one or multiple dynamic values.
- donts: Don't use it to add multiple new values as tags. Use `` with manual input feature instead.
### VerticalTabs
- description: Vertical tabs let users vertically navigate between different content sections within a page, card, or panel.
- do: Use it to organize multiple content sections within the same context. Use short and descriptive tab titles.
- donts: Don't use it to show the path users need to follow to complete a process. Use `` instead. Don't place critical navigation elements within tabs. Don't make the user click back and forth on the different tabs to complete a single task.
### VerticalTabsItem
- description: A vertical tabs item is a single row of content in ``.
- do: Use this as a part of the `` component.
- donts: Don't use a vertical tabs item as a stand-alone component.
### VerticalTabsIconItem
- description: A vertical tabs icon item is a single row of content in ``.
- do: Use this as a part of the `` component.
- donts: Don't use a vertical tabs icon item as a stand-alone component.
### WixDesignSystemProvider
- description: No description
- do: No do
- donts: No donts
### WixStyleReactEnvironmentProvider
- description: `` is a wrapper that holds app-wide configuration for the library, such as the locale.
- do: Use it to set the locale once for every component inside it, such as ``, `` and ``. Wrap your whole app with it, or the part of the app that shares one locale.
- donts: Don't set the locale on each component separately when one provider can set it for all of them. Don't pass a locale that isn't an Intl language code, such as "English" instead of "en".
### WixStyleReactMaskingProvider
- description: No description
- do: No do
- donts: No donts
### SplitAction
- description: Split action combines a primary action or a set of actions with a secondary menu of related actions.
- do: Use it to communicate a primary action alongside related alternative actions. Limit visible actions to 2–3, place additional options in the dropdown. Group actions that belong to the same task (e.g. different ways to publish).
- donts: Don't hide commonly used actions in the dropdown, use separate buttons instead. Don't duplicate actions between the main buttons and the dropdown. Don't use vague labels like "More" or "Actions" for visible buttons. Don't use it as a replacement for navigation or links, use ``, `` or `` instead.