Component Showcase

CC Control Design System · All live-verified components from dchdesign-en.insided.com

Buttons — button-control-new (Horizon / current)
Secondary (default)
Primary
Danger
With end icon (endIcon variant)
Toggle — .ds-toggle (Figma 16412-3227)
Off
On
Disabled off
Disabled on
With label
Small
Pills — .pill
Default Info Info bold Success Success bold Warning Danger
Badge Labels — .badge-beta / .badge-new
BETA NEW
Status Pills — .status-pill (topic/post)
Published Draft Pending
Section Status Badge — .moderation-agent__badge

AI Moderation

ON

AI Moderation

OFF
Form Controls

Multi-select tag field (.tag-field)
Administrators Moderators Select roles…
Settings Card Pattern — .dirty-section

Section Title

Type A — vertical field

Label and description above a full-width control.

Type B — horizontal row

Info on left, control on right. Used for toggles and dropdowns.

Section Messages — .section-msg
Info — this is an informational message for the user.
Success — changes saved successfully.
Warning — please review before continuing.
Danger — this action cannot be undone.
Nav Panel — .nav-panel
Active Link Link Two Link Three Link Four
Modal — .modal
Toast — .toast
Changes saved successfully Something went wrong, please try again
Page Banner — .page-banner
This community is in read-only mode until the upgrade is complete.
Your subscription expires in 7 days. Renew to avoid service interruption.
Spinner — .spinner
Skeleton — .skeleton
Tabs — .tabs
Overview
Activity
Settings
Empty State — .empty-state
No results found
Try adjusting your filters or search terms to find what you're looking for.
Tooltip — .has-tooltip
Tooltip text Appears below
Post Card — .box .topic-wrapper
D
New Participant

How to contact support (when it's really needed!)

0 replies · 0 views

This is the opening post body text. It describes the topic in detail.

Collapsible Panel — .m-section
Overview
Type:Article
Created:8 Sep 2026
Status:Published
Legacy Buttons (reference — do not use in new prototypes)