Overview of the Radio component
The Radio button is a control used for selecting one option from a group of several mutually exclusive values. It is primarily used for group settings where only one selection is permitted.
Intergalactic Design System
website·Indexed 19 days ago
https://developer.semrush.com/api/v3/Documentation for Semrush's Intergalactic design system, featuring a comprehensive library of components (Button, Card, SidePanel), data display tools (Venn, Kagi, Polar, and Quadrant charts), and layout patterns. It includes core principles on accessibility, motion, visual loudness, and design tokens, as well as technical guidance on wrapping components and CSS injection.
What's inside Intergalactic
Overview of Select and Multiselect components
The Select component allows users to choose one or more values from a list. It supports optional features such as search inputs, titles, buttons, grouping, and nesting.Overview of the Cigarette bar chart
The Cigarette bar chart visualizes parts of a whole by dividing a single bar into proportional segments. The entire bar always represents 100%. It is functionally similar to a Donut chart and is best used for highlighting category proportions rather than exact values. It is recommended for datasets with 5 or fewer categories; for larger datasets, a standard Bar chart is preferred.Overview of the Switch component
The Switch component allows users to toggle between two options or states instantly without page refreshes or confirmation dialogs. It is composed of the following sub-components:
Switch.Value: The toggle control itself.Switch.Addon: Additional elements associated with the switch.
Overview of FeaturePopover component
FeaturePopover is used to highlight a specific interface part or control, such as pointing to a new function or suggesting the next step in a user flow. It should be used for basic reference or promotional information and is designed to be non-intrusive, allowing users to close it easily.Overview of InputTags component
InputTags is an input field that converts entered information into tags. It is designed for entering large amounts of similar data in a single field, such as employee emails or keywords, and is commonly used in conjunction with a Combobox for auto-suggestions.Overview of the InlineEdit component
TheInlineEditcomponent is a wrapper that allows a smooth transition between a read-only view mode and an editing mode without requiring a page reload. It is best used in spatially constrained interfaces or where data entry is supplementary (e.g., notes within cards) rather than the primary focus of the page.Overview of TabPanel component
The TabPanel component is used for grouping heterogeneous content. It should not be used as the main navigation of an interface (use the main menu instead) or for switching between states (use Switch or Radio components instead).Overview of InlineInput component
InlineInput is a single-line text field designed for switching between view-only and editing modes without reloading the page. It is ideal for tight interfaces where space is limited or for secondary data entry tasks (e.g., editing titles, descriptions, or tags in cards).
Key Constraints:
- Do not mix InlineInput with regular inputs within a single form used for submitting data to a system.
- The font size in edit mode should match the font size used in view-mode to maintain visual consistency.
Overview of TabLine component
TabLine is a navigation component used to group homogeneous content within a report, settings page, or landing page. It should be used for secondary navigation and not as the primary interface menu. For switching between simple states, use the Switch or Radio components instead.Overview of the Tag component
The Tag component is used to thematically group information within an interface. It is commonly implemented in tables, filters, and cards, and can be set either by the system or by the user.Overview of BaseTrigger and its variants
BaseTrigger is a foundational component used to create triggers with button-like behavior. It is implemented in three primary types depending on the required scenario:
ButtonTrigger: Standard button-like trigger.FilterTrigger: Operates as an active state of a filter (refer to the detailed FilterTrigger guide for specific usage).LinkTrigger: A trigger that adopts the styles of the Link component.