Component overview

Allow users to act on single or multiple items using a container of horizontally aligned buttons.

Allow users to access a list of actions when space is limited.

Allow users to trigger available actions that are clearly communicated.

Allow users to switch between alternate views of related content using horizontal groups of two or more buttons.

Allow users to copy text or content to their clipboard with a single click.

Allow users to select a date from a visual calendar.

Allow users to select a range of dates quickly and intuitively.

Allow users to input, filter, or label information using static or interactive elements.

Allow users to select a site .

Allow users to like, save, or prioritize an item, often pinning it for quick access.

Allow users to turn settings or options on or off with immediate effect.

Allow users to access guidance on what Fancy Context is and how to use it.

Allow users to access guidance on how to use Fancy Themes.

Allow users to view and interact with graphical representations of data.

Allow users to see progress toward a goal or target as a percentage within a circular format, where the circle represents 100%.

Allow users to see a numerical value as a percentage of a goal or target (100%) within a circular format.

Allow users to see the progress of a specific process and its sub-processes.

Allow users to see the progress of a specific process, keeping them informed and managing expectations.

Allow users to see the status or progress of an item on a clear, linear 3- or 4-step scale.

Allow users to see numerical series trends in limited spaces via a compact, axis-free line graph.

Allow users to comprehend trends (positive, negative, or neutral) in numerical data, shown within highlights and tables.

Allow users to understand page content and expectations through introductory guidance, improving their experience.

Allow users to receive essential information, feedback, or status updates related to actions or system states.

Allow users to know that their action is being processed or that content is loading for an indeterminate amount of time.

Allow users to be informed of changes or updates from an action via a passive, non-modal notification.

Allow users to provide data or configure options through a group of related input controls where form element wrappers are correctly enclosed in a form tag.

Allow users to interact with form elements within a structured container that clarifies purpose, offers context, and displays feedback consistently.

Allows users to select and upload files from their devices.

Allow users to choose one or more items from a list, where the selected item(s) can represent a value in a form or be used to filter or sort existing content.

Allow users to input a single line of text.

Allow users to choose only one item from a list of mutually exclusive choices.

Allow users to input multiple lines of text, ideal for free-form responses, comments, or descriptions.

Allow users to speed up data filtering by receiving live search suggestions as they type.

Allow users to select one or more items from a list.

Allow users to explore content and features through a primary navigation structure with a clear visual hierarchy.

Allow users to quickly access essential site-wide utilities and global actions via a persistent, top-level navigation element that also reinforces brand identity.

Allow users to quickly search navigation menu items by keyboard within a popover.

Allow users to see their current location within an application and quickly navigate back to higher-level pages.

Allow users to navigate to a different page, page section, or site.

Allow users to navigate efficiently through large datasets or content spanning multiple pages, and to customize the number of items displayed per page.

Allow users to navigate between different views of related content while remaining in the same page context.

Allow users to interact with contextual information or actions presented in custom popover interfaces built with this foundational wrapper.

Allow users to focus on critical information or an action by interrupting their workflow with an overlay.

Allow users to view additional information or actions relevant to a specific element within a floating container anchored to the trigger.

Allow users to focus on a specific task or information within a panel that slides in from the right, keeping the main content partially visible.

Allow users to see a short, context-specific text message when they hover over or focus on an element.

Allow users to access an explanation of how structural components fit together.

Allow users to reveal or hide grouped content, reducing scrolling when multiple sections are on a single page.

Allow users to experience content organized within a consistent and user-friendly foundational structure.

Allow users to view grouped information, controls, and actions related to a single topic.

Allow users to view content with consistent spacing and alignment, managed by this invisible layout container.

Allow users to experience content with controlled padding, alignment, positioning, and responsive behavior, facilitated by this invisible wrapper.

Allow users to see a clear visual divide between content sections.

Allow users to view content organized in a responsive grid of variably sized cards.

Allow users to interact with list content (typically from an ActionMenu) that is used independently.

Allow users to view structured data in a clean, accessible, and simplified table format.

Allow users to understand information in each table column and optionally sort column data for easier data discovery.

Allow users to quickly and efficiently narrow down data sets in tables or lists through controls and customization for focusing on relevant information.

Allow users to easily scan and quickly access key data organized in logical, hierarchical patterns.

Allow users to scan, compare, and analyze highly structured data presented clearly.

Allow users to interact with well-configured and feature-rich tables.

Allow users to interact with and manage tables (e.g., filter, search, export) via a centralized toolbar.

Allow users to read primary and secondary text displayed together for emphasis or clarity.

Allow users to read externally supplied HTML content with correct and consistent typographic styling.

Allow users to see dates and times in a clear, user-friendly, locale-specific format.

Allow users to see numerical data in a standardized and locale-aware format.

Allow users to easily identify page and section titles.

Allow users to focus on important data and metrics through visual emphasis.

Allow users to read single words or short text snippets (e.g., data in tables, UI labels) presented standalone or in a sentence.

Allow users to view vertically grouped text-only items, understanding priority or sequence with ordered lists, or relationships with unordered lists.

Allow users to read content with simplified and consistent formatting applied via Markdown syntax.

Allow users to read blocks of text comprising one or more complete sentences.

Allow users of assistive technologies (e.g., screen readers) to access text that is hidden visually.

Allow users to have an optimized reading experience for long-form content through appropriate vertical spacing between text elements.

Allow users to easily identify specific words or phrases that are visually emphasized within a body of text.

Allow users to see the title and URL of a page, and click the title to navigate to it.

Allow users to quickly identify the status, category, or numeric value of an item through a visual highlight.

Allow users to receive context and guidance when a container has no content to display.

Allow users to better understand UI elements and improve scannability through visual cues for actions, status, content, or feedback.

Allow users to access an overview of all icons available for use.

Allow users to experience visually enhanced content and concepts for a more engaging experience.

Allow users to access an overview of all illustrations available for use.

Allow users to quickly preview larger images or content via compact visual representations, aiding navigation or selection.