{ "blueprints": [ { "name": "Accordion", "description": "A vertically stacked list of items where only one item is shown at a time. When a new item is clicked, it expands to reveal its content and the previously open item closes. Each accordion consists of multiple sections with collapsible content areas and clickable headers.", "category": "Layout", "slds_classes": { "root": "slds-accordion", "elements": [ { "class": "slds-accordion__list-item", "description": "Container for each accordion section", "purpose": "Wraps individual accordion items" }, { "class": "slds-accordion__section", "description": "Individual section within the accordion", "purpose": "Contains a single collapsible section with header and content" }, { "class": "slds-accordion__summary", "description": "Clickable header area for each accordion section", "purpose": "Contains the accordion toggle button and summary content" }, { "class": "slds-accordion__summary-heading", "description": "Heading container within the summary", "purpose": "Contains the text heading for the accordion section" }, { "class": "slds-accordion__summary-content", "description": "Content area within the summary", "purpose": "Contains the section title and description" }, { "class": "slds-accordion__summary-action", "description": "Action area within the summary", "purpose": "Contains buttons or interactive elements in the summary" }, { "class": "slds-accordion__summary-action-icon", "description": "Icon for expand/collapse action", "purpose": "Visual indicator for section state and interaction" }, { "class": "slds-accordion__content", "description": "Collapsible content area of each accordion section", "purpose": "Contains the main content that expands/collapses" } ], "modifiers": [ { "class": "slds-is-open", "description": "Applied to accordion section when expanded", "usage": "Toggle on/off to control accordion section state" } ], "states": [ { "class": "slds-is-open", "description": "Expanded state for accordion sections", "trigger": "User interaction with summary button" }, { "class": "slds-is-closed", "description": "Collapsed section state", "trigger": "Applied when accordion section is collapsed" } ] }, "variants": [ { "name": "Base", "description": "Standard accordion with expandable sections", "classes": [ "slds-accordion" ], "usage_context": "Default implementation for collapsible content sections", "differences": "Single accordion with multiple collapsible sections" } ], "lightning_component": { "name": "lightning-accordion", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-accordion", "mapping_notes": "Direct mapping - Lightning component implements SLDS accordion blueprint. Individual sections map to lightning-accordion-section components." }, "accessibility": { "keyboard_support": [ "Tab to navigate between accordion sections", "Enter/Space to expand/collapse sections", "Arrow keys may be used for section navigation", "Focus management within expanded content" ], "screen_reader": [ "Announces section state (expanded/collapsed)", "Provides context about accordion content", "Section purpose and state announced", "Expansion state changes communicated", "Content structure properly conveyed" ], "aria_attributes": [ "aria-expanded on summary elements", "aria-controls linking summary to content", "role='button' on interactive summary elements", "aria-labelledby for content labeling", "role='region' for content areas" ] }, "usage_guidelines": { "when_to_use": [ "When you have multiple sections of content that users might not need to see all at once", "To save vertical space on a page", "For FAQ sections or help documentation", "When content can be logically grouped into sections", "For organizing related content that can be shown/hidden", "When content hierarchy needs progressive disclosure" ], "when_not_to_use": [ "When all content should be visible simultaneously", "For navigation menus (use navigation components instead)", "When sections are very small and wouldn't benefit from collapsing", "For unrelated content groupings" ], "best_practices": [ "Use clear, descriptive headings for each section", "Keep section headings concise", "Ensure content within sections is meaningful when collapsed", "Provide visual indicators for expanded/collapsed states", "Group related content logically", "Provide meaningful content in each section", "Consider default expanded/collapsed states", "Maintain consistent section behavior" ], "common_mistakes": [ "Making section headings too vague", "Overusing accordions where tabbed interfaces would be better", "Not providing proper ARIA attributes for accessibility", "Using unclear or generic section titles", "Putting too much content in individual sections", "Inconsistent section behavior", "Poor content organization within sections" ] }, "code_examples": [ { "title": "Basic Accordion", "description": "Standard accordion with single section", "code": "
\n
\n
\n

\n \n

\n
\n
\n

Accordion content

\n
\n
\n
\n" }, { "title": "Multi-Section Accordion", "description": "Complete accordion with multiple expandable sections", "code": "
\n
\n
\n

\n \n

\n
\n
\n

This section contains information about getting started with our platform. You'll find step-by-step instructions, helpful tips, and links to additional resources.

\n
    \n
  • Create your account
    • \n
  • Complete your profile
    • \n
  • Explore the dashboard
    • \n
  • Take the guided tour
    • \n
\n
\n
\n
\n
\n

\n \n

\n
\n
\n

Learn about our advanced features and how to use them effectively in your workflow.

\n
\n
\n
\n
\n

\n \n

\n
\n
\n
\n
\n

Profile Information

\n
    \n
  • Update your name and contact details
    • \n
  • Change your profile picture
    • \n
  • Manage privacy settings
    • \n
\n
\n
\n

Security

\n
    \n
  • Change your password
    • \n
  • Enable two-factor authentication
    • \n
  • Review login activity
    • \n
\n
\n
\n
\n
\n
\n" }, { "title": "FAQ Accordion", "description": "Accordion optimized for frequently asked questions", "code": "
\n
\n
\n

\n \n

\n
\n
\n

To reset your password:

\n
    \n
  1. Click the \"Forgot Password\" link on the login page
    2. \n
  2. Enter your email address
    3. \n
  3. Check your email for reset instructions
    4. \n
  4. Follow the link and create a new password
    5. \n
\n
\n
\n
\n
\n

\n \n

\n
\n
\n

Your billing information can be found in the Account Settings section under \"Billing & Payments\". From there you can:

\n
    \n
  • View current charges
    • \n
  • Download invoices
    • \n
  • Update payment methods
    • \n
  • Change billing addresses
    • \n
\n
\n
\n
\n" } ], "styling_hooks": [ { "name": "--slds-c-accordion-heading-color", "description": "Text color for accordion headings", "category": "color" }, { "name": "--slds-c-accordion-heading-font-size", "description": "Font size for accordion headings", "category": "typography" }, { "name": "--slds-c-accordion-section-color-border", "description": "Border color for accordion sections", "category": "color" }, { "name": "--slds-c-accordion-section-sizing-border", "description": "Border width for accordion sections", "category": "sizing" }, { "name": "--slds-c-accordion-section-spacing-block-end", "description": "Bottom spacing for accordion sections", "category": "spacing" }, { "name": "--slds-c-accordion-section-spacing-block-start", "description": "Top spacing for accordion sections", "category": "spacing" }, { "name": "--slds-c-accordion-section-spacing-inline-end", "description": "Right spacing for accordion sections", "category": "spacing" }, { "name": "--slds-c-accordion-section-spacing-inline-start", "description": "Left spacing for accordion sections", "category": "spacing" }, { "name": "--slds-c-accordion-summary-color-background", "description": "Background color for accordion summary", "category": "color" } ], "dependencies": { "css_files": [ "accordion.css", "button.css" ], "javascript": [ "accordion.js" ], "icons": [ "utility-sprite.svg" ], "other_components": [ "button" ] }, "related_components": [ { "name": "Expandable Section", "relationship": "similar", "description": "Single expandable section, simpler alternative" }, { "name": "Tabs", "relationship": "alternative", "description": "Alternative for organizing content sections" }, { "name": "Summary Detail", "relationship": "similar", "description": "Similar progressive disclosure pattern" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/accordion/" }, "metadata": { "version": "2.0.0", "last_updated": "2025-11-12", "review_status": "complete", "merge_notes": "Merged accordion-section.yaml into unified accordion blueprint for SLDS architectural accuracy", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Activity Timeline", "description": "A visual representation of events arranged in chronological order, used to display a sequence of activities or milestones with associated metadata.", "category": "Display", "slds_classes": { "root": "", "elements": [ { "class": "slds-timeline__date", "description": "Date/time display for timeline item", "purpose": "Shows when the timeline event occurred" }, { "class": "slds-timeline__actions", "description": "Actions container for timeline item", "purpose": "Contains interactive elements like buttons or links" } ], "modifiers": [], "states": [] }, "variants": [ { "name": "Base", "description": "Standard activity timeline with chronological events", "classes": [], "usage_context": "Default implementation for showing activity history", "differences": "Vertical timeline with media objects for each event" } ], "lightning_component": { "name": "No direct component", "url": "https://developer.salesforce.com/docs/component-library/overview/components", "mapping_notes": "No direct Lightning Base Component equivalent - SLDS-only pattern" }, "accessibility": { "keyboard_support": [ "Tab navigation through interactive elements", "Focus management for embedded actions" ], "screen_reader": [ "Chronological order conveyed through markup structure", "Event details properly associated with headings", "Time/date information announced with events" ], "aria_attributes": [ "aria-labelledby for timeline item titles", "role='list' and role='listitem' for semantic structure", "aria-describedby for additional event details" ] }, "usage_guidelines": { "when_to_use": [ "To display chronological sequence of events or activities", "For showing audit trails or activity logs", "When temporal relationship between events is important", "To provide historical context for records or objects" ], "when_not_to_use": [ "For non-chronological lists (use regular lists instead)", "When temporal order is not relevant", "For simple status updates (use feeds instead)", "When space is extremely constrained" ], "best_practices": [ "Order events chronologically (newest first or oldest first consistently)", "Use meaningful icons to categorize different event types", "Keep event descriptions concise but informative", "Include relevant timestamps", "Group related events when appropriate" ], "common_mistakes": [ "Mixing chronological orders inconsistently", "Using unclear or non-descriptive event labels", "Omitting important temporal information", "Making timeline items too dense with information" ] }, "code_examples": [ { "title": "Basic Timeline Item", "code": "
\n
\n \n \n \n \n \n \n
\n

Email sent

\n

Today at 2:30 PM

\n
\n

Follow-up email sent to customer regarding their inquiry.

\n
\n
\n \n
\n
\n" } ], "styling_hooks": [], "dependencies": { "css_files": [ "timeline.css", "media-objects.css" ], "javascript": [], "icons": [ "utility-sprite.svg" ], "other_components": [ "media-objects", "icons" ] }, "related_components": [ { "name": "Feeds", "relationship": "alternative", "description": "Alternative for activity streams with less temporal emphasis" }, { "name": "Path", "relationship": "similar", "description": "Similar concept for process progression" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/activity-timeline/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Alert", "description": "A banner component used to communicate a state that affects the entire application or page, not a specific feature or task.", "category": "Feedback", "slds_classes": { "root": "", "elements": [], "modifiers": [ { "class": "slds-alert_warning", "description": "Warning alert variant", "usage": "Use for warnings that need user attention" }, { "class": "slds-alert_error", "description": "Error alert variant", "usage": "Use for error messages that require immediate attention" }, { "class": "slds-alert_offline", "description": "Offline state alert variant", "usage": "Use specifically for offline connectivity messages" } ], "states": [] }, "variants": [ { "name": "Base", "description": "Standard alert with different severity levels", "classes": [ "slds-alert_warning", "slds-alert_error" ], "usage_context": "Page-level or application-level notifications", "differences": "Different colors and icons based on message type" } ], "lightning_component": { "name": "lightning-alert", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-alert", "mapping_notes": "Direct mapping - Lightning component implements SLDS alert blueprint" }, "accessibility": { "keyboard_support": [ "No specific keyboard interactions required", "Focus management handled by parent context" ], "screen_reader": [ "Alert role automatically announced by screen readers", "Icon meaning conveyed through appropriate aria-label", "Alert text read immediately when displayed" ], "aria_attributes": [ "role='alert' for immediate announcements", "aria-label on icons to convey meaning", "aria-live='polite' or 'assertive' based on severity" ] }, "usage_guidelines": { "when_to_use": [ "For system-wide messages that affect the entire application", "To communicate global state changes", "For critical information that users must be aware of", "When the message applies to the entire page or workflow" ], "when_not_to_use": [ "For feature-specific messages (use toast instead)", "For field-level validation (use field-level help)", "For temporary notifications (use toast instead)", "For success confirmations of user actions (use toast)" ], "best_practices": [ "Use appropriate severity levels (info, warning, error)", "Keep alert messages concise and actionable", "Place alerts at the top of the content area", "Provide clear next steps when appropriate", "Don't stack multiple alerts unless absolutely necessary" ], "common_mistakes": [ "Overusing alerts for non-critical information", "Using wrong alert type for the message content", "Making alert messages too long or complex", "Not providing actionable information in critical alerts" ] }, "code_examples": [ { "title": "Info Alert", "code": "
\n \n \n \n \n \n Base System Alert\n
\n" }, { "title": "Warning Alert", "code": "
\n \n \n \n \n \n Your session will expire in 10 minutes.\n
\n" }, { "title": "Error Alert", "code": "
\n \n \n \n \n \n System maintenance is currently in progress.\n
\n" } ], "styling_hooks": [], "dependencies": { "css_files": [ "alert.css" ], "javascript": [], "icons": [ "utility-sprite.svg" ], "other_components": [ "icons" ] }, "related_components": [ { "name": "Toast", "relationship": "alternative", "description": "For temporary, action-specific notifications" }, { "name": "Notifications", "relationship": "similar", "description": "Similar notification patterns for different contexts" }, { "name": "Prompt", "relationship": "alternative", "description": "Modal dialogs for critical alerts requiring action" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/alert/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "App Launcher", "description": "A grid-based interface that allows users to discover and navigate to different applications, typically accessed through a waffle menu or launcher button.", "category": "Navigation", "slds_classes": { "root": "slds-app-launcher", "elements": [ { "class": "slds-app-launcher__content", "description": "Main content area of the app launcher", "purpose": "Contains the application grid and navigation sections" }, { "class": "slds-app-launcher__tile", "description": "Individual application tile", "purpose": "Represents a single application with icon and label" }, { "class": "slds-app-launcher__tile-figure", "description": "Icon container within application tile", "purpose": "Holds the application icon or image" }, { "class": "slds-app-launcher__tile-body", "description": "Content area within application tile", "purpose": "Contains application name and description" } ], "modifiers": [], "states": [] }, "variants": [ { "name": "Base", "description": "Standard app launcher with application grid", "classes": [ "slds-app-launcher" ], "usage_context": "Default implementation for application navigation", "differences": "Grid-based layout with application tiles and sections" } ], "lightning_component": { "name": "No direct component", "url": "https://developer.salesforce.com/docs/component-library/overview/components", "mapping_notes": "No direct Lightning Base Component equivalent - typically implemented as custom component" }, "accessibility": { "keyboard_support": [ "Tab navigation through application tiles", "Enter/Space to activate application tiles", "Arrow keys for grid navigation" ], "screen_reader": [ "Application names and descriptions announced", "Grid layout conveyed to assistive technologies" ], "aria_attributes": [ "role='grid' for the application layout", "role='gridcell' for individual application tiles", "aria-label for application tiles" ] }, "usage_guidelines": { "when_to_use": [ "To provide access to multiple applications or modules", "When users need to switch between different tools", "For discovery of available applications" ], "when_not_to_use": [ "For small numbers of applications", "When applications are contextually related", "For single-application interfaces" ], "best_practices": [ "Use meaningful icons for applications", "Keep application names concise", "Group related applications logically", "Provide search for large numbers of apps" ], "common_mistakes": [ "Using unclear icons", "Making tiles too small to interact with", "Not providing adequate spacing" ] }, "code_examples": [ { "title": "Basic App Launcher", "description": "Basic app launcher with single application tile", "code": "
\n
\n

App Launcher

\n
\n
\n
\n
\n \n \n \n
\n
\n

Sales Cloud

\n
\n
\n
\n
\n" } ], "styling_hooks": [], "dependencies": { "css_files": [ "app-launcher.css" ], "javascript": [], "icons": [ "standard-sprite.svg" ], "other_components": [ "icons", "grid" ] }, "related_components": [ { "name": "Global Navigation", "relationship": "container", "description": "Often contains the app launcher" }, { "name": "Navigation", "relationship": "alternative", "description": "Alternative navigation patterns" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/app-launcher/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Avatar Group", "description": "A collection of avatars displayed together, typically used to show multiple users or entities associated with a record or activity.", "category": "Display", "slds_classes": { "root": "slds-avatar-group", "elements": [], "modifiers": [ { "class": "slds-avatar-group_small", "description": "Small avatar group variant", "usage": "Use when space is limited" }, { "class": "slds-avatar-group_medium", "description": "Medium avatar group variant (default)", "usage": "Default size for most use cases" }, { "class": "slds-avatar-group_large", "description": "Large avatar group variant", "usage": "Use for prominence or when space allows" } ], "states": [] }, "variants": [ { "name": "Base", "description": "Standard avatar group with overlapping avatars", "classes": [ "slds-avatar-group" ], "usage_context": "Default implementation for multiple user representation", "differences": "Overlapping circular avatars with proper spacing" } ], "lightning_component": { "name": "No direct component", "url": "https://developer.salesforce.com/docs/component-library/overview/components", "mapping_notes": "No direct Lightning Base Component equivalent - typically built using multiple lightning-avatar components" }, "accessibility": { "keyboard_support": [ "Tab navigation through interactive avatars if clickable" ], "screen_reader": [ "List structure conveyed through proper markup", "Individual avatar labels announced" ], "aria_attributes": [ "role='list' for the avatar group container", "role='listitem' for individual avatar items" ] }, "usage_guidelines": { "when_to_use": [ "To show multiple users associated with a record", "For team or collaboration indicators", "When displaying attendees or participants" ], "when_not_to_use": [ "For single users (use individual avatar instead)", "When space doesn't allow for proper overlap visualization" ], "best_practices": [ "Limit to 3-5 visible avatars for optimal readability", "Show additional count for larger groups", "Maintain consistent avatar sizes within the group" ], "common_mistakes": [ "Showing too many avatars without grouping or count", "Inconsistent avatar sizes within the group" ] }, "code_examples": [ { "title": "Basic Avatar Group", "description": "Basic avatar group with two users", "code": "
\n \n
\n" } ], "styling_hooks": [], "dependencies": { "css_files": [ "avatar-group.css", "avatar.css" ], "javascript": [], "icons": [], "other_components": [ "avatar" ] }, "related_components": [ { "name": "Avatar", "relationship": "depends-on", "description": "Individual avatars that make up the group" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/avatar-group/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Avatar", "description": "A visual representation of an object, typically used to represent a user, account, or entity with customizable sizing, shape, and fallback options.", "category": "Display", "slds_classes": { "root": "slds-avatar", "elements": [ { "class": "slds-avatar__initials", "description": "Text initials when no image is available", "purpose": "Displays initials as fallback when image is not available" } ], "modifiers": [ { "class": "slds-avatar_circle", "description": "Circular avatar shape", "usage": "Default circular appearance for avatars" }, { "class": "slds-avatar_x-small", "description": "Extra small avatar size", "usage": "Use in constrained spaces like dense lists" }, { "class": "slds-avatar_small", "description": "Small avatar size", "usage": "Use in compact layouts" }, { "class": "slds-avatar_medium", "description": "Medium avatar size (default)", "usage": "Default size for most use cases" }, { "class": "slds-avatar_large", "description": "Large avatar size", "usage": "Use for profile pages or prominent display" } ], "states": [] }, "variants": [ { "name": "Base", "description": "Avatar with image", "classes": [ "slds-avatar" ], "usage_context": "Default avatar with user or entity image", "differences": "Shows actual image of the person or entity" }, { "name": "Initials", "description": "Avatar with initials fallback", "classes": [ "slds-avatar" ], "usage_context": "When no image is available, shows initials", "differences": "Displays text initials instead of image" } ], "lightning_component": { "name": "lightning-avatar", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-avatar", "mapping_notes": "Direct mapping - Lightning component implements SLDS avatar blueprint" }, "accessibility": { "keyboard_support": [ "No specific keyboard interactions (display-only component)" ], "screen_reader": [ "Alt text announced for images", "Initials announced when used as fallback" ], "aria_attributes": [ "alt attribute for image avatars", "aria-label for initials avatars" ] }, "usage_guidelines": { "when_to_use": [ "To represent users, accounts, or entities visually", "In lists, cards, or headers where identification is needed", "When you need consistent visual representation" ], "when_not_to_use": [ "For decorative images", "When the representation doesn't relate to a person or entity", "For actionable content" ], "best_practices": [ "Use appropriate size for the context", "Provide meaningful alt text for images", "Use initials as fallback when images aren't available" ], "common_mistakes": [ "Using avatars for non-person/entity content", "Not providing fallback options", "Inconsistent sizing within the same interface" ] }, "code_examples": [ { "title": "Basic Avatar", "code": "\n \"Person\n \n" }, { "title": "Initials Avatar", "code": "\n JD\n \n" } ], "dependencies": { "css_files": [ "avatar.css" ], "javascript": [], "icons": [], "other_components": [] }, "related_components": [ { "name": "Avatar Group", "relationship": "container", "description": "Groups multiple avatars together" }, { "name": "Media Objects", "relationship": "depends-on", "description": "Often used within media object patterns" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/avatar/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Badges", "description": "Small status descriptors for UI elements that indicate metadata, state, or other contextual information about an item.", "category": "Display", "slds_classes": { "root": "slds-badge", "elements": [], "modifiers": [ { "class": "slds-badge_lightest", "description": "Lightest badge variant", "usage": "Subtle, low-emphasis status indication" }, { "class": "slds-badge_inverse", "description": "Inverse badge for dark backgrounds", "usage": "Use on dark or colored backgrounds" } ], "states": [] }, "variants": [ { "name": "Base", "description": "Standard badge with default styling", "classes": [ "slds-badge" ], "usage_context": "Default status or metadata indicator", "differences": "Standard gray badge with medium contrast" } ], "styling_hooks": [ { "name": "--slds-c-badge-color-background", "description": "Background color for badges", "category": "color" }, { "name": "--slds-c-badge-text-color", "description": "Text color for badges", "category": "color" } ], "lightning_component": { "name": "lightning-badge", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-badge", "mapping_notes": "Direct mapping - Lightning component implements SLDS badge blueprint" }, "accessibility": { "keyboard_support": [ "No specific keyboard interactions (display-only component)" ], "screen_reader": [ "Badge text content announced", "Context conveyed through proper labeling" ], "aria_attributes": [ "aria-label when badge content needs clarification", "role='status' for dynamic badge updates" ] }, "usage_guidelines": { "when_to_use": [ "To indicate status or state of an item", "For showing counts or quantities", "To display metadata or categories", "When you need compact status indicators" ], "when_not_to_use": [ "For actionable elements (use buttons instead)", "For primary content (use regular text instead)", "When the information is critical (use alerts instead)" ], "best_practices": [ "Keep badge text short and descriptive", "Use consistent badge styling within the same context", "Choose appropriate variant for the background", "Provide clear context for what the badge represents" ], "common_mistakes": [ "Using badges for interactive elements", "Making badge text too long or verbose", "Using too many different badge styles in one interface" ] }, "code_examples": [ { "title": "Basic Badge", "description": "Basic badge with default styling", "code": "Badge Label\n" }, { "title": "Lightest Badge", "description": "Subtle badge for counts or low-emphasis status", "code": "99+\n" }, { "title": "Inverse Badge", "description": "Badge for use on dark backgrounds", "code": "Active\n" } ], "dependencies": { "css_files": [ "badge.css" ], "javascript": [], "icons": [], "other_components": [] }, "related_components": [ { "name": "Pills", "relationship": "similar", "description": "Similar visual treatment but for removable items" }, { "name": "Icons", "relationship": "depends-on", "description": "Often used together to enhance meaning" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/badges/" }, "metadata": { "version": "1.0.0", "last_updated": "2024-12-19", "review_status": "complete" } }, { "name": "Brand Band", "description": "A visual header component that displays branding elements, organizational identity, and context information, typically positioned at the top of applications to establish brand presence and visual hierarchy.", "category": "Layout", "slds_classes": { "root": "slds-brand-band", "elements": [], "modifiers": [ { "class": "slds-brand-band_small", "description": "Small brand band height", "usage": "For compact brand display" }, { "class": "slds-brand-band_medium", "description": "Medium brand band height", "usage": "Standard brand band sizing" }, { "class": "slds-brand-band_large", "description": "Large brand band height", "usage": "For prominent brand display" }, { "class": "slds-brand-band_cover", "description": "Cover-style brand band", "usage": "For full-width background coverage" } ], "states": [] }, "variants": [ { "name": "Base", "description": "Standard brand band with basic branding", "classes": [ "slds-brand-band" ], "usage_context": "Default implementation for application branding", "differences": "Basic brand display with title and optional image" }, { "name": "Small", "description": "Compact brand band for minimal branding", "classes": [ "slds-brand-band", "slds-brand-band_small" ], "usage_context": "When space is limited or subtle branding is preferred", "differences": "Reduced height and compact layout" }, { "name": "Large", "description": "Prominent brand band for strong brand presence", "classes": [ "slds-brand-band", "slds-brand-band_large" ], "usage_context": "For landing pages or primary brand displays", "differences": "Increased height and prominent branding elements" }, { "name": "Cover", "description": "Full-width background brand band", "classes": [ "slds-brand-band", "slds-brand-band_cover" ], "usage_context": "For hero-style brand presentations", "differences": "Full-width background with overlay content" } ], "lightning_component": { "name": "lightning-brand-band", "url": "https://developer.salesforce.com/docs/component-library/overview/components", "mapping_notes": "Brand band functionality often implemented through custom header components or app branding" }, "accessibility": { "keyboard_support": [ "Tab navigation through brand band interactive elements", "Focus management for brand band controls" ], "screen_reader": [ "Brand information properly announced", "Image alt text provided for brand images", "Brand context clearly communicated" ], "aria_attributes": [ "role='banner' for page header branding", "aria-label for brand context", "aria-describedby for additional brand information" ] }, "usage_guidelines": { "when_to_use": [ "For establishing application or organizational branding", "When brand presence needs to be prominent", "In application headers and landing pages", "For organizational identity and context" ], "when_not_to_use": [ "In content areas where branding would be distracting", "For functional navigation (use navigation components)", "When minimal branding approach is preferred" ], "best_practices": [ "Keep branding consistent across application", "Ensure brand elements are accessible", "Use appropriate sizing for context", "Maintain brand guidelines and standards", "Consider responsive behavior" ], "common_mistakes": [ "Overusing brand elements throughout interface", "Poor contrast for brand text and images", "Inconsistent brand presentation", "Missing accessibility considerations" ] }, "code_examples": [ { "title": "Basic Brand Band", "description": "Standard brand band with logo and title", "code": "
\n
\n
\n
\n
\n
\n \"Company\n
\n
\n
\n

\n Application Name\n

\n

\n Powered by Salesforce\n

\n
\n
\n
\n
\n
\n" }, { "title": "Large Brand Band", "description": "Prominent brand band with additional controls", "code": "
\n
\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n
\n
\n
\n

\n Sales Cloud\n

\n

\n Enterprise Customer Relationship Management\n

\n
\n
\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n
\n
\n" }, { "title": "Small Brand Band", "description": "Compact brand band for minimal branding", "code": "
\n
\n
\n
\n
\n
\n \n \n \n \n \n
\n
\n
\n

\n Service Console\n

\n
\n
\n
\n
\n
\n" }, { "title": "Cover Brand Band", "description": "Full-width background brand band with overlay", "code": "
\n
\n
\n
\n \n \n \n \n \n
\n

\n Marketing Cloud\n

\n

\n Drive personalized customer journeys at scale\n

\n
\n \n \n
\n
\n
\n
\n" }, { "title": "Lightning Styled Brand Band", "description": "Brand band with Lightning Design System styling", "code": "
\n
\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n
\n
\n
\n

\n Lightning Experience\n

\n

\n Modern CRM Platform\n

\n
\n
\n
\n
\n
\n \n Beta\n \n
\n
\n
\n
\n
\n
\n" }, { "title": "Brand Band with Navigation", "description": "Brand band integrated with primary navigation", "code": "
\n
\n
\n
\n
\n
\n
\n
\n \"Company\"\n
\n
\n
\n

\n Customer Portal\n

\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n" } ], "dependencies": { "css_files": [ "brand-band.css", "grid.css", "media-object.css" ], "javascript": [], "icons": [ "standard-sprite.svg", "utility-sprite.svg" ], "other_components": [ "button", "badge", "media-object" ] }, "related_components": [ { "name": "Global Header", "relationship": "similar", "description": "Similar header functionality" }, { "name": "Page Header", "relationship": "similar", "description": "Similar page-level header concept" }, { "name": "Global Navigation", "relationship": "depends-on", "description": "Often used together with navigation" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/brand-band/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Breadcrumbs", "description": "A navigation aid that shows users their current location within a hierarchical structure and provides links to navigate back to parent levels.", "category": "Navigation", "slds_classes": { "root": "slds-breadcrumb", "elements": [ { "class": "slds-breadcrumb__item", "description": "Individual breadcrumb item wrapper", "purpose": "Contains a single breadcrumb link or text" } ], "modifiers": [], "states": [ { "class": "slds-is-current", "description": "Current page indicator", "trigger": "Applied to the current page breadcrumb item" } ] }, "variants": [ { "name": "Base", "description": "Standard breadcrumb navigation with linked trail", "classes": [ "slds-breadcrumb" ], "usage_context": "Default implementation for hierarchical navigation", "differences": "Horizontal list of linked navigation items with separators" } ], "lightning_component": { "name": "lightning-breadcrumbs", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-breadcrumbs", "mapping_notes": "Direct mapping - Lightning component implements SLDS breadcrumb blueprint" }, "accessibility": { "keyboard_support": [ "Tab navigation through breadcrumb links", "Enter/Space to activate breadcrumb links" ], "screen_reader": [ "Navigation landmark conveyed through proper markup", "Breadcrumb trail structure announced", "Current location clearly identified" ], "aria_attributes": [ "role='navigation' for breadcrumb container", "aria-label='Breadcrumb' for navigation context", "aria-current='page' for current location" ] }, "usage_guidelines": { "when_to_use": [ "For hierarchical navigation structures", "When users need to understand their current location", "To provide quick navigation to parent levels", "In multi-level content organization" ], "when_not_to_use": [ "For flat, non-hierarchical navigation", "When the hierarchy is only one level deep", "In mobile interfaces with limited space" ], "best_practices": [ "Keep breadcrumb labels concise and descriptive", "Show the full path to current location", "Make parent levels clickable for navigation", "Use consistent separator styling", "Position breadcrumbs near the top of content" ], "common_mistakes": [ "Making breadcrumb labels too long or verbose", "Not making parent levels clickable", "Using breadcrumbs for non-hierarchical content", "Inconsistent separator styling" ] }, "code_examples": [ { "title": "Basic Breadcrumbs", "description": "Standard breadcrumb navigation with multiple levels", "code": "\n" }, { "title": "Simple Breadcrumbs", "description": "Breadcrumb with only one parent level", "code": "\n" } ], "dependencies": { "css_files": [ "breadcrumb.css" ], "javascript": [], "icons": [], "other_components": [] }, "related_components": [ { "name": "Path", "relationship": "similar", "description": "Similar navigation concept for process steps" }, { "name": "Vertical Navigation", "relationship": "alternative", "description": "Alternative navigation pattern for hierarchical content" }, { "name": "Global Navigation", "relationship": "container", "description": "Often contains breadcrumb navigation" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/breadcrumbs/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Builder Header", "description": "A specialized global header component designed for builder and editor interfaces. It provides a fixed header with navigation, branding, and utility actions, along with an optional toolbar for document-level actions.", "category": "Layout", "slds_classes": { "root": "slds-builder-header", "elements": [ { "class": "slds-builder-header_container", "description": "Container that fixes the builder header to the top of the viewport", "purpose": "Wrapper element that positions the header at the top of the page" }, { "class": "slds-builder-header__item", "description": "Direct child item of the builder header", "purpose": "Contains navigation items, branding, or utilities" }, { "class": "slds-builder-header__item-label", "description": "Non-interactive label inside a header item", "purpose": "Displays text or branding within a header item" }, { "class": "slds-builder-header__item-action", "description": "Interactive action element inside a header item", "purpose": "Clickable button or link within a header item" }, { "class": "slds-builder-header__nav", "description": "Container for the navigation region", "purpose": "Holds the navigation list within the header" }, { "class": "slds-builder-header__nav-list", "description": "List element containing navigation items", "purpose": "Unordered list wrapper for navigation items" }, { "class": "slds-builder-header__nav-item", "description": "Individual navigation item", "purpose": "List item wrapping each navigation element" }, { "class": "slds-builder-header__utilities", "description": "Container for utility actions (back, help, etc.)", "purpose": "Holds utility links and actions, typically right-aligned" }, { "class": "slds-builder-header__utilities-item", "description": "Individual utility item", "purpose": "Wrapper for utility actions like back or help buttons" }, { "class": "slds-builder-toolbar", "description": "Toolbar region below the builder header", "purpose": "Contains document-level actions and controls" }, { "class": "slds-builder-toolbar__actions", "description": "Container for toolbar actions", "purpose": "Holds action buttons, typically right-aligned" }, { "class": "slds-builder-toolbar__item-group", "description": "Group of related toolbar items", "purpose": "Visually groups related buttons or controls" } ], "modifiers": [], "states": [] }, "variants": [ { "name": "Base", "description": "Standard builder header with navigation", "classes": [ "slds-builder-header" ], "usage_context": "Default builder header for editor interfaces", "differences": "Fixed header with dark background and navigation items" }, { "name": "With Toolbar", "description": "Builder header with toolbar region", "classes": [ "slds-builder-header_container", "slds-builder-header", "slds-builder-toolbar" ], "usage_context": "When document-level actions need to be accessible", "differences": "Includes a toolbar section below the main header" } ], "lightning_component": { "name": "", "url": "https://developer.salesforce.com/docs/component-library/overview/components", "mapping_notes": "No direct Lightning Base Component - typically built with lightning-layout and custom styling" }, "accessibility": { "keyboard_support": [ "Tab to navigate between header items", "Enter or Space to activate header actions", "Arrow keys for navigation within header items" ], "screen_reader": [ "Header landmark announced", "Navigation landmark announced", "Action labels announced", "Current navigation state indicated" ], "aria_attributes": [ "role='banner' on header element", "role='navigation' on nav container", "aria-label on navigation regions", "aria-current for active navigation items" ] }, "usage_guidelines": { "when_to_use": [ "For builder, editor, or creation interfaces", "When consistent global navigation is needed", "For applications with document-level actions", "In complex editing workflows" ], "when_not_to_use": [ "For standard application navigation (use global-header)", "In simple viewing interfaces", "When header needs to scroll with content", "For mobile-first experiences" ], "best_practices": [ "Keep navigation items concise and clear", "Place most important actions in visible areas", "Use consistent iconography and labeling", "Ensure adequate touch targets for mobile", "Group related toolbar actions together", "Maintain proper contrast on dark background" ], "common_mistakes": [ "Overcrowding the header with too many items", "Inconsistent spacing between elements", "Poor color contrast on background", "Missing keyboard navigation support", "Not indicating current/active state" ] }, "code_examples": [ { "title": "Basic Builder Header", "code": "
\n
\n
\n
\n \n \n \n \n \n
\n
\n \n
\n
\n Back\n
\n
\n Help\n
\n
\n
\n
\n", "description": "Basic builder header with branding, navigation, and utilities" }, { "title": "Builder Header with Toolbar", "code": "
\n
\n
\n
\n Page Builder\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n \n \n
\n
\n
\n \n
\n
\n
\n
\n", "description": "Builder header with toolbar containing document actions" } ], "styling_hooks": [ { "name": "--slds-g-color-brand-base-20", "description": "Background color of the builder header", "css_property": "background" }, { "name": "--slds-g-color-neutral-base-100", "description": "Text color in the builder header", "css_property": "color" }, { "name": "--slds-g-color-brand-base-10", "description": "Border color between header items", "css_property": "border-color" }, { "name": "--slds-g-shadow-inset-inverse-focus-1", "description": "Focus shadow for header actions", "css_property": "box-shadow" }, { "name": "--slds-g-color-border-base-1", "description": "Toolbar border color", "css_property": "border-color" } ], "dependencies": { "css_files": [ "builder-header.css", "button.css" ], "javascript": [ "Navigation state management", "Active item highlighting" ], "icons": [ "utility:undo", "utility:redo", "utility:preview", "logo:salesforce" ], "other_components": [ "button", "icon" ] }, "related_components": [ { "name": "Global Header", "relationship": "alternative", "description": "Standard application header for non-builder interfaces" }, { "name": "Page Header", "relationship": "related", "description": "Header for individual pages, not globally fixed" }, { "name": "Docked Utility Bar", "relationship": "complementary", "description": "Can be used alongside builder header for utilities" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/builder-header/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-11", "author": "SLDS Documentation Team", "slds_version": "2.27.2", "review_status": "complete", "source": "official-slds", "notes": "Created from official SLDS documentation and design-system-internal source code" } }, { "name": "Button Groups", "description": "A collection of related buttons grouped together, maintaining consistent spacing and visual hierarchy while providing clear action choices.", "category": "Actions", "slds_classes": { "root": "slds-button-group", "elements": [], "modifiers": [], "states": [] }, "variants": [ { "name": "Base", "description": "Standard button group with consistent spacing", "classes": [ "slds-button-group" ], "usage_context": "Default implementation for related action grouping", "differences": "Horizontal layout with proper button spacing" } ], "lightning_component": { "name": "lightning-button-group", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-button-group", "mapping_notes": "Direct mapping - Lightning component implements SLDS button group blueprint" }, "accessibility": { "keyboard_support": [ "Tab navigation through individual buttons", "Enter/Space to activate buttons", "Arrow keys for group navigation when appropriate" ], "screen_reader": [ "Group structure conveyed through list semantics", "Individual button labels announced", "Button relationships communicated" ], "aria_attributes": [ "role='group' with descriptive aria-label", "role='list' for button container", "role='listitem' for individual button wrappers" ] }, "usage_guidelines": { "when_to_use": [ "For related actions that should be grouped together", "When you need consistent button spacing", "For toolbar-style interfaces", "When actions are conceptually related but distinct" ], "when_not_to_use": [ "For single actions (use individual buttons)", "When actions are unrelated", "For navigation (use navigation components instead)" ], "best_practices": [ "Group conceptually related actions together", "Maintain consistent button styling within groups", "Order buttons by importance or frequency of use", "Provide clear, action-oriented button labels" ], "common_mistakes": [ "Grouping unrelated actions together", "Using inconsistent button styles within a group", "Creating overly large button groups" ] }, "code_examples": [ { "title": "Basic Button Group", "description": "Basic button group with cancel and save actions", "code": "
\n \n \n
\n" } ], "styling_hooks": [], "dependencies": { "css_files": [ "button-group.css", "button.css" ], "javascript": [], "icons": [], "other_components": [ "button" ] }, "related_components": [ { "name": "Button", "relationship": "depends-on", "description": "Individual buttons that make up the group" }, { "name": "Button Icons", "relationship": "depends-on", "description": "Icon buttons can be used within groups" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/button-groups/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Button Icons", "description": "Icon-only buttons that provide visual actions without text labels. Available in multiple variants including transparent, bordered, filled, and inverse styles for use on different backgrounds.", "category": "Actions", "slds_classes": { "root": "slds-button_icon", "elements": [ { "class": "slds-button__icon", "description": "Icon element within the button", "purpose": "SVG icon that represents the button action" }, { "class": "slds-button__icon_hint", "description": "Hint styling for icon that changes on hover", "purpose": "Subdued icon color that becomes more visible on hover" }, { "class": "slds-button__icon_inverse-hint", "description": "Hint styling for icon on dark backgrounds", "purpose": "Subdued inverse icon color for dark backgrounds" } ], "modifiers": [ { "class": "slds-button_icon-container", "description": "Container-styled button icon with standard dimensions", "purpose": "Default 32x32px button icon container" }, { "class": "slds-button_icon-border", "description": "Button icon with transparent background and border", "purpose": "Bordered button icon for light backgrounds" }, { "class": "slds-button_icon-border-filled", "description": "Button icon with filled white background and border", "purpose": "Bordered button with solid background" }, { "class": "slds-button_icon-border-inverse", "description": "Button icon with border for dark backgrounds", "purpose": "Bordered button icon for inverse/dark backgrounds" }, { "class": "slds-button_icon-inverse", "description": "Bare button icon for dark backgrounds", "purpose": "Button icon without border for dark backgrounds" }, { "class": "slds-button_icon-brand", "description": "Button icon with brand color background", "purpose": "Branded, filled button icon" }, { "class": "slds-button_icon-more", "description": "Button icon for overflow menus with borders", "purpose": "Typically used for three-dot menu buttons" }, { "class": "slds-button_icon-container-more", "description": "Button icon for overflow menus without borders", "purpose": "Borderless overflow menu button" }, { "class": "slds-button_icon-error", "description": "Error state styling for button icon", "purpose": "Indicates error or destructive action" }, { "class": "slds-button_icon-warning", "description": "Warning state styling for button icon", "purpose": "Indicates caution or warning" }, { "class": "slds-button_icon-current-color", "description": "Applies current text color to icon", "purpose": "Inherits color from parent context" }, { "class": "slds-button_icon-xx-small", "description": "Extra extra small button icon (16x16px)", "purpose": "Smallest button icon size" }, { "class": "slds-button_icon-x-small", "description": "Extra small button icon (20x20px)", "purpose": "Very small button icon size" }, { "class": "slds-button_icon-small", "description": "Small button icon (24x24px)", "purpose": "Small button icon size" }, { "class": "slds-button_icon-large", "description": "Large button icon (48x48px)", "purpose": "Large button icon size" } ], "states": [ { "class": "slds-is-selected", "description": "Selected/active state for button icon", "trigger": "When button represents active state" } ] }, "variants": [ { "name": "Bare", "description": "Icon button with no background or border", "classes": [ "slds-button_icon" ], "usage_context": "Minimal button style for light backgrounds", "differences": "Transparent with icon only, no visual container" }, { "name": "Container", "description": "Icon button with container sizing", "classes": [ "slds-button_icon", "slds-button_icon-container" ], "usage_context": "Standard icon button with defined boundaries", "differences": "32x32px container for consistent sizing" }, { "name": "Border", "description": "Icon button with border and transparent background", "classes": [ "slds-button_icon", "slds-button_icon-border" ], "usage_context": "When button needs more visual weight", "differences": "Border with transparent background" }, { "name": "Border Filled", "description": "Icon button with border and filled background", "classes": [ "slds-button_icon", "slds-button_icon-border-filled" ], "usage_context": "Maximum visual emphasis for icon button", "differences": "Border with solid white background" }, { "name": "Inverse", "description": "Icon button for dark backgrounds", "classes": [ "slds-button_icon", "slds-button_icon-inverse" ], "usage_context": "Use on dark or colored backgrounds", "differences": "Light colored icon for dark backgrounds" }, { "name": "Border Inverse", "description": "Bordered icon button for dark backgrounds", "classes": [ "slds-button_icon", "slds-button_icon-border-inverse" ], "usage_context": "Bordered button on dark backgrounds", "differences": "Border with inverse colors" }, { "name": "Brand", "description": "Icon button with brand color background", "classes": [ "slds-button_icon", "slds-button_icon-brand" ], "usage_context": "Primary action icon button", "differences": "Filled with brand blue background" } ], "lightning_component": { "name": "lightning-button-icon", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-button-icon", "mapping_notes": "lightning-button-icon provides icon-only buttons with variant support" }, "accessibility": { "keyboard_support": [ "Tab to focus button", "Enter or Space to activate button" ], "screen_reader": [ "Button role announced", "Accessible label must be provided (aria-label or slds-assistive-text)", "Button state announced (pressed, disabled)" ], "aria_attributes": [ "aria-label required for icon-only buttons", "aria-pressed for toggle buttons", "aria-disabled for disabled state", "title attribute for tooltip text" ] }, "usage_guidelines": { "when_to_use": [ "For actions where icon clearly conveys meaning", "To save space in compact interfaces", "For common, well-understood actions (edit, delete, close)", "In toolbars and action bars" ], "when_not_to_use": [ "For actions that aren't universally understood", "When text label would significantly improve clarity", "As primary call-to-action (use full button instead)", "For complex or ambiguous actions" ], "best_practices": [ "Always provide accessible text via aria-label or assistive text", "Use consistent icons for same actions throughout app", "Provide tooltip on hover for additional context", "Ensure adequate touch target size (minimum 44x44px)", "Choose appropriate variant for background context", "Use hint variant for less important actions" ], "common_mistakes": [ "Missing accessible text label", "Using unclear or ambiguous icons", "Touch targets too small on mobile", "Wrong variant for background color", "Inconsistent icon usage across application" ] }, "code_examples": [ { "title": "Basic Icon Button", "code": "\n" }, { "title": "Bordered Icon Button", "code": "\n" }, { "title": "Filled Bordered Icon Button", "code": "\n" }, { "title": "Brand Icon Button", "code": "\n" }, { "title": "Inverse Icon Button", "code": "
\n \n
\n" }, { "title": "Icon Button with Hint", "code": "
\n \n
\n" }, { "title": "Size Variants", "code": "
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n" } ], "styling_hooks": [ { "name": "--slds-g-color-neutral-base-50", "description": "Default icon color", "css_property": "color" }, { "name": "--slds-g-color-neutral-base-100", "description": "Background color for filled variants", "css_property": "background-color" }, { "name": "--slds-g-shadow-outset-focus-1", "description": "Focus shadow for buttons", "css_property": "box-shadow" }, { "name": "--slds-g-color-error-base-40", "description": "Color for error state", "css_property": "color" }, { "name": "--slds-g-color-warning-base-50", "description": "Color for warning state", "css_property": "color" } ], "dependencies": { "css_files": [ "button-icons.css", "button.css", "icon.css" ], "javascript": [ "Click handlers", "Tooltip functionality" ], "icons": [ "Various utility icons" ], "other_components": [ "icon", "tooltip" ] }, "related_components": [ { "name": "Button", "relationship": "parent", "description": "Base button component" }, { "name": "Button Group", "relationship": "complementary", "description": "Groups multiple button icons together" }, { "name": "Icon", "relationship": "contains", "description": "Icon element within button" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/button-icons/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "author": "SLDS Documentation Team", "slds_version": "2.27.2", "review_status": "complete", "source": "official-slds", "notes": "Created from official SLDS documentation and design-system-internal source code Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Buttons", "description": "Clickable elements used to perform actions. Buttons communicate action and direct user intent.", "category": "Actions", "slds_classes": { "root": "slds-button", "elements": [ { "class": "slds-button__icon", "description": "Icon within button", "purpose": "Contains SVG icons inside buttons" }, { "class": "slds-button__icon_left", "description": "Icon positioned on the left side of button text", "purpose": "Positions icon to the left of button label" }, { "class": "slds-button__icon_right", "description": "Icon positioned on the right side of button text", "purpose": "Positions icon to the right of button label" } ], "modifiers": [ { "class": "slds-button_neutral", "description": "Default button style with neutral appearance", "usage": "Use for secondary actions or when multiple buttons are present" }, { "class": "slds-button_brand", "description": "Primary button style with brand color", "usage": "Use for primary actions, limit to one per page section" }, { "class": "slds-button_outline-brand", "description": "Button with brand-colored outline", "usage": "Use for secondary actions that need more emphasis than neutral" }, { "class": "slds-button_destructive", "description": "Button for destructive actions", "usage": "Use for delete, remove, or other potentially harmful actions" }, { "class": "slds-button_text-destructive", "description": "Text-only destructive button", "usage": "Use for destructive actions that need less visual weight" }, { "class": "slds-button_success", "description": "Button for successful or positive actions", "usage": "Use for confirm, save, or other positive actions" }, { "class": "slds-button_inverse", "description": "Button for use on dark backgrounds", "usage": "Use when button appears on dark or colored backgrounds" }, { "class": "slds-button_icon", "description": "Icon-only button base class", "usage": "Use for buttons containing only icons" }, { "class": "slds-button_icon-bare", "description": "Icon button with no border or background", "usage": "Use for minimal icon buttons" }, { "class": "slds-button_icon-container", "description": "Icon button with container styling", "usage": "Use for icon buttons that need visual containment" }, { "class": "slds-button_icon-border", "description": "Icon button with border", "usage": "Use for icon buttons that need border definition" }, { "class": "slds-button_icon-border-filled", "description": "Icon button with border and background fill", "usage": "Use for icon buttons that need filled appearance" }, { "class": "slds-button_icon-more", "description": "Icon button styled for 'more actions' pattern", "usage": "Use specifically for overflow menu triggers" } ], "sizes": [ { "class": "slds-button_small", "description": "Small button size", "usage": "Use when default size is too large" } ], "states": [ { "class": "slds-is-selected", "description": "Selected state for stateful buttons", "trigger": "User selection or programmatic state change" }, { "class": "slds-not-selected", "description": "Not selected state for stateful buttons", "trigger": "Default or deselected state" } ] }, "variants": [ { "name": "Base", "description": "Standard button styles including neutral, brand, and destructive variants", "classes": [ "slds-button", "slds-button_neutral", "slds-button_brand" ], "usage_context": "Default buttons for actions throughout the interface", "differences": "Different visual emphasis levels for action hierarchy" }, { "name": "Icon", "description": "Icon-only buttons in various styles", "classes": [ "slds-button", "slds-button_icon", "slds-button_icon-border" ], "usage_context": "When space is constrained or action is universally understood", "differences": "No text labels, rely on iconography for meaning" }, { "name": "Stateful", "description": "Buttons that toggle between states", "classes": [ "slds-button", "slds-is-selected", "slds-not-selected" ], "usage_context": "For toggle actions like favorites, follow, or selection", "differences": "Visual state changes based on user interaction" } ], "lightning_component": { "name": "lightning-button", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-button", "mapping_notes": "Direct mapping - Lightning component implements SLDS button blueprint with additional functionality" }, "accessibility": { "keyboard_support": [ "Tab to focus on button", "Enter or Space to activate button", "Focus visible indicators required" ], "screen_reader": [ "Button text or aria-label announced", "Button role automatically conveyed", "State changes announced for stateful buttons" ], "aria_attributes": [ "aria-label for icon-only buttons", "aria-pressed for stateful toggle buttons", "aria-describedby for additional context", "aria-disabled for disabled state" ] }, "usage_guidelines": { "when_to_use": [ "To trigger an action or event", "To submit forms", "To navigate to a new page or section", "To open modals or dialogs" ], "when_not_to_use": [ "For navigation use links instead", "When the action is not immediately actionable", "For decorative purposes" ], "best_practices": [ "Use clear, action-oriented labels", "Maintain visual hierarchy with button types", "Limit primary buttons to one per section", "Group related buttons logically", "Ensure sufficient spacing between buttons" ], "common_mistakes": [ "Using multiple primary buttons in the same area", "Making button labels too vague", "Not providing sufficient color contrast", "Overusing destructive button styling" ] }, "code_examples": [ { "title": "Basic Button Variants", "code": "\n \n \n" }, { "title": "Button with Icons", "code": "\n" }, { "title": "Icon Only Button", "code": "\n" }, { "title": "Stateful Button", "code": "\n" } ], "styling_hooks": [ { "name": "--slds-c-button-brand-color-background", "description": "Background color for brand buttons", "category": "color" }, { "name": "--slds-c-button-brand-color-background-hover", "description": "Background color for brand buttons on hover", "category": "color" }, { "name": "--slds-c-button-brand-color-background-active", "description": "Background color for brand buttons when active", "category": "color" }, { "name": "--slds-c-button-brand-color-border", "description": "Border color for brand buttons", "category": "color" }, { "name": "--slds-c-button-brand-text-color", "description": "Text color for brand buttons", "category": "color" }, { "name": "--slds-c-button-neutral-color-background", "description": "Background color for neutral buttons", "category": "color" }, { "name": "--slds-c-button-neutral-color-background-hover", "description": "Background color for neutral buttons on hover", "category": "color" }, { "name": "--slds-c-button-neutral-color-background-active", "description": "Background color for neutral buttons when active", "category": "color" }, { "name": "--slds-c-button-neutral-color-border", "description": "Border color for neutral buttons", "category": "color" }, { "name": "--slds-c-button-destructive-color-background", "description": "Background color for destructive buttons", "category": "color" }, { "name": "--slds-c-button-destructive-color-background-hover", "description": "Background color for destructive buttons on hover", "category": "color" }, { "name": "--slds-c-button-destructive-color-border", "description": "Border color for destructive buttons", "category": "color" }, { "name": "--slds-c-button-success-color-background", "description": "Background color for success buttons", "category": "color" }, { "name": "--slds-c-button-success-color-background-hover", "description": "Background color for success buttons on hover", "category": "color" }, { "name": "--slds-c-button-success-color-border", "description": "Border color for success buttons", "category": "color" }, { "name": "--slds-c-button-spacing-inline", "description": "Horizontal padding for buttons", "category": "spacing" }, { "name": "--slds-c-button-font-weight", "description": "Font weight for button text", "category": "typography" }, { "name": "--slds-c-button-radius-border", "description": "Border radius for buttons", "category": "border" }, { "name": "--slds-c-button-sizing-border", "description": "Border width for buttons", "category": "sizing" } ], "dependencies": { "css_files": [ "buttons.css" ], "javascript": [], "icons": [ "utility-sprite.svg (for icon buttons)" ], "other_components": [ "button-groups", "button-icons" ] }, "related_components": [ { "name": "Button Groups", "relationship": "container", "description": "Groups multiple buttons together" }, { "name": "Button Icons", "relationship": "variant", "description": "Icon-only button implementations" }, { "name": "Menus", "relationship": "trigger", "description": "Buttons often trigger dropdown menus" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/buttons/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Cards", "description": "A foundational component that provides a structured container for related content with optional header, body, and footer sections.", "category": "Layout", "slds_classes": { "root": "slds-card", "elements": [ { "class": "slds-card__header", "description": "Header section of the card", "purpose": "Contains title, actions, and header content" }, { "class": "slds-card__header-title", "description": "Title container within card header", "purpose": "Holds the main heading for the card" }, { "class": "slds-card__body", "description": "Main content area of the card", "purpose": "Contains the primary card content" }, { "class": "slds-card__footer", "description": "Footer section of the card", "purpose": "Contains actions, links, or supplementary information" } ], "modifiers": [ { "class": "slds-card_boundary", "description": "Card with border styling", "usage": "Adds visible border to define card boundaries" } ], "states": [] }, "variants": [ { "name": "Base", "description": "Standard card with header, body, and optional footer", "classes": [ "slds-card" ], "usage_context": "Default card implementation for content grouping", "differences": "Clean card structure with defined sections" } ], "lightning_component": { "name": "lightning-card", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-card", "mapping_notes": "Direct mapping - Lightning component implements SLDS card blueprint" }, "accessibility": { "keyboard_support": [ "Tab navigation through interactive elements within card", "Focus management for embedded components" ], "screen_reader": [ "Card structure conveyed through semantic markup", "Header, body, footer sections properly identified", "Content hierarchy communicated clearly" ], "aria_attributes": [ "aria-labelledby for card titles", "role='region' when card represents distinct content area", "aria-describedby for additional card context" ] }, "usage_guidelines": { "when_to_use": [ "To group related content together", "For displaying data records or entities", "When you need a structured content container", "To create visual separation between content sections" ], "when_not_to_use": [ "For simple text content (use regular layout instead)", "When content doesn't benefit from grouping", "For navigation elements (use navigation components)" ], "best_practices": [ "Use descriptive titles in card headers", "Group related content logically", "Keep card content focused and concise", "Use footer for actions related to the card content", "Maintain consistent card sizing within collections" ], "common_mistakes": [ "Overloading cards with too much content", "Using cards for single pieces of information", "Inconsistent card styling within the same interface", "Missing or unclear card titles" ] }, "code_examples": [ { "title": "Complete Card", "code": "
\n
\n
\n
\n

\n \n Accounts (1)\n \n

\n
\n
\n
\n
\n

Card body content goes here...

\n
\n \n
\n" } ], "styling_hooks": [ { "name": "--slds-c-card-color-background", "description": "Background color for cards", "category": "color" }, { "name": "--slds-c-card-color-border", "description": "Border color for cards", "category": "color" } ], "dependencies": { "css_files": [ "card.css", "media-objects.css", "grid.css" ], "javascript": [], "icons": [], "other_components": [ "media-objects", "grid", "truncate" ] }, "related_components": [ { "name": "Tiles", "relationship": "similar", "description": "Alternative layout component for content grouping" }, { "name": "Panels", "relationship": "similar", "description": "Alternative container component" }, { "name": "Media Objects", "relationship": "depends-on", "description": "Often used within card headers" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/cards/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Carousel", "description": "A slideshow component that displays a series of content panels with navigation controls, allowing users to browse through multiple items in a contained space.", "category": "Layout", "slds_classes": { "root": "slds-carousel", "elements": [ { "class": "slds-carousel__stage", "description": "Main container for carousel content", "purpose": "Holds the carousel panels and manages overflow" }, { "class": "slds-carousel__panels", "description": "Container for all carousel panels", "purpose": "Groups all slideable content panels" }, { "class": "slds-carousel__panel", "description": "Individual carousel content panel", "purpose": "Contains a single slide of content" }, { "class": "slds-carousel__panel-action", "description": "Interactive element within panel", "purpose": "Clickable area for panel interaction" }, { "class": "slds-carousel__indicators", "description": "Navigation indicator container", "purpose": "Holds dot indicators for carousel position" }, { "class": "slds-carousel__indicator", "description": "Individual position indicator", "purpose": "Shows and controls current carousel position" } ], "modifiers": [], "states": [ { "class": "slds-is-active", "description": "Active panel/indicator state", "trigger": "Currently visible carousel panel" } ] }, "variants": [ { "name": "Base", "description": "Standard carousel with navigation controls", "classes": [ "slds-carousel" ], "usage_context": "Default carousel for multiple content panels", "differences": "Slideshow with navigation dots and arrow controls" } ], "lightning_component": { "name": "lightning-carousel", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-carousel", "mapping_notes": "Direct mapping - Lightning component implements SLDS carousel blueprint" }, "accessibility": { "keyboard_support": [ "Tab to focus carousel navigation controls", "Enter/Space to activate navigation", "Arrow keys to navigate between panels", "Tab to move through panel content" ], "screen_reader": [ "Carousel structure and current position announced", "Panel content changes communicated", "Navigation controls clearly identified", "Total panel count and current position provided" ], "aria_attributes": [ "role='region' for carousel container", "aria-label describing carousel purpose", "aria-live='polite' for panel changes", "aria-current for active panel indicator", "role='tablist' for indicator navigation", "role='tab' for individual indicators" ] }, "usage_guidelines": { "when_to_use": [ "To display multiple related content items in limited space", "For showcasing featured content or images", "When users should browse through a collection", "For onboarding or tutorial sequences" ], "when_not_to_use": [ "For critical information that must be seen", "When all content should be immediately visible", "For single items (use cards or other layouts)", "When navigation between items is not meaningful" ], "best_practices": [ "Provide clear navigation controls", "Include position indicators for context", "Ensure content is meaningful in sequence", "Handle auto-play responsibly (provide pause control)", "Make panels keyboard accessible" ], "common_mistakes": [ "Auto-playing without user control", "Poor navigation control visibility", "Not indicating current position", "Making panels too dense with information" ] }, "code_examples": [ { "title": "Basic Carousel", "code": "
\n
\n
\n
\n \n
\n

Panel 1 Content

\n
\n \n
\n
\n \n
\n

Panel 2 Content

\n
\n \n
\n
\n
\n \n
\n" } ], "styling_hooks": [], "dependencies": { "css_files": [ "carousel.css" ], "javascript": [ "carousel.js" ], "icons": [], "other_components": [] }, "related_components": [ { "name": "Tabs", "relationship": "similar", "description": "Similar panel switching concept" }, { "name": "Cards", "relationship": "depends-on", "description": "Often used as content within carousel panels" }, { "name": "Images", "relationship": "depends-on", "description": "Commonly used content type in carousels" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/carousel/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Chat", "description": "A component for displaying current or past chat sessions between customers and service agents. It appears as a chronological log with messages, events, and bookend markers to indicate session boundaries.", "category": "Complex Components", "slds_classes": { "root": "slds-chat", "elements": [ { "class": "slds-chat-list", "description": "List container for chat items", "purpose": "Holds the ordered list of chat messages and events" }, { "class": "slds-chat-listitem", "description": "Individual item in the chat list", "purpose": "Wraps each message, event, or bookend in the chat" }, { "class": "slds-chat-listitem_inbound", "description": "Inbound message list item (customer to agent)", "purpose": "Styles messages received from customer" }, { "class": "slds-chat-listitem_outbound", "description": "Outbound message list item (agent to customer)", "purpose": "Styles messages sent by agent, right-aligned" }, { "class": "slds-chat-listitem_bookend", "description": "Bookend item marking session start/end", "purpose": "Visual separator for chat session boundaries" }, { "class": "slds-chat-listitem_event", "description": "Event item in chat log", "purpose": "Displays system events like 'Agent joined'" }, { "class": "slds-chat-message", "description": "Message container", "purpose": "Wraps chat message content and metadata" }, { "class": "slds-chat-message__body", "description": "Message body container", "purpose": "Contains message text and avatar alignment" }, { "class": "slds-chat-message__text", "description": "Message text content", "purpose": "Displays the actual message content" }, { "class": "slds-chat-message_faux-avatar", "description": "Faux avatar for alignment", "purpose": "Aligns consecutive messages without showing duplicate avatars" }, { "class": "slds-chat-avatar", "description": "Avatar element in chat", "purpose": "Displays user avatar in chat messages" }, { "class": "slds-chat-icon", "description": "Icon styling within chat", "purpose": "Styles icons used in messages and events" }, { "class": "slds-chat-message__file", "description": "File attachment in message", "purpose": "Displays file attachments in chat" }, { "class": "slds-chat-message__image_loading", "description": "Loading state for images", "purpose": "Shows loading indicator for image attachments" } ], "modifiers": [], "states": [] }, "variants": [ { "name": "Base", "description": "Standard chat log display", "classes": [ "slds-chat" ], "usage_context": "Default chat implementation with messages and events", "differences": "Chronological display with inbound and outbound messages" } ], "lightning_component": { "name": "", "url": "https://developer.salesforce.com/docs/component-library/overview/components", "mapping_notes": "No direct Lightning Base Component - typically built with custom components for messaging platforms" }, "accessibility": { "keyboard_support": [ "Tab to navigate through interactive elements", "Screen reader reads messages in chronological order" ], "screen_reader": [ "role='log' on chat container", "Messages announced as they appear", "Sender identification announced", "Timestamps and metadata announced" ], "aria_attributes": [ "role='log' on chat container", "aria-label for chat region", "aria-live for new messages (polite or assertive)", "Sender and timestamp information accessible" ] }, "usage_guidelines": { "when_to_use": [ "For customer service chat interfaces", "To display chat history or transcripts", "In messaging or communication features", "For live or archived chat sessions" ], "when_not_to_use": [ "For comments or discussion threads", "For simple message lists without conversation context", "For email or notification displays", "When real-time updates aren't needed" ], "best_practices": [ "Display messages in chronological order", "Clearly differentiate inbound and outbound messages", "Include timestamps for message context", "Show sender identification (avatar and name)", "Use bookends to mark session boundaries", "Handle long messages with proper wrapping", "Support file attachments and rich content" ], "common_mistakes": [ "Not distinguishing message direction clearly", "Missing timestamps on messages", "Poor handling of consecutive messages", "Inadequate spacing between messages", "Not marking session start/end clearly" ] }, "code_examples": [ { "title": "Basic Chat Log", "code": "
\n \n
\n" }, { "title": "Chat with Events", "code": "
\n \n
\n" } ], "styling_hooks": [], "dependencies": { "css_files": [ "chat.css", "avatar.css", "icon.css" ], "javascript": [ "Message scrolling and auto-scroll to latest", "Real-time message updates", "Typing indicators" ], "icons": [ "utility:chat", "utility:end_chat", "utility:user" ], "other_components": [ "avatar", "icon" ] }, "related_components": [ { "name": "Activity Timeline", "relationship": "similar", "description": "Similar chronological display pattern" }, { "name": "Feed", "relationship": "similar", "description": "Alternative for activity streams" }, { "name": "Publisher", "relationship": "complementary", "description": "Input component for sending messages" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/chat/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "author": "SLDS Documentation Team", "slds_version": "2.27.2", "review_status": "complete", "source": "official-slds", "notes": "Created from official SLDS documentation and design-system-internal source code Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Checkbox Button Group", "description": "A styled checkable input group that communicates if an option(s) are true, false or indeterminate. A set of checkbox buttons wrapped in a fieldset that is also a form element.", "category": "Input", "slds_classes": { "root": "slds-checkbox_button-group", "elements": [ { "class": "slds-checkbox_button", "description": "Individual checkbox button within the group", "purpose": "Container for each checkbox option in the button group" }, { "class": "slds-checkbox_faux", "description": "Visual checkbox replacement styled as a button", "purpose": "Custom-styled checkbox appearance that looks like a button" }, { "class": "slds-checkbox_button__label", "description": "Label element for the checkbox button", "purpose": "Provides clickable area and contains the checkbox faux element" } ], "modifiers": [], "states": [ { "class": "slds-has-error", "description": "Error state styling for the form element", "trigger": "When checkbox group validation fails" }, { "class": "slds-is-disabled", "description": "Disabled state styling", "trigger": "When checkbox group is not interactive" } ] }, "variants": [ { "name": "Base", "description": "Standard checkbox button group", "classes": [ "slds-checkbox_button-group" ], "usage_context": "Default checkbox button group implementation", "differences": "Group of checkbox buttons with shared border and styling" } ], "lightning_component": { "name": "", "url": "https://developer.salesforce.com/docs/component-library/overview/components", "mapping_notes": "No direct Lightning Base Component - use checkbox-button components in a group" }, "accessibility": { "keyboard_support": [ "Tab to navigate between checkbox buttons", "Space to toggle checkbox state", "Arrow keys may navigate between options in some implementations" ], "screen_reader": [ "Fieldset legend announced as group label", "Checkbox state announced (checked/unchecked)", "Label text read with each checkbox", "Error messages associated and announced" ], "aria_attributes": [ "aria-describedby for error messages", "aria-invalid when validation fails", "aria-required for required checkbox groups", "fieldset and legend for group semantics" ] }, "usage_guidelines": { "when_to_use": [ "When users need to select multiple options from a related set", "For compact selection interfaces where button styling is preferred", "When options are closely related and benefit from visual grouping", "For scheduling, filtering, or multi-select scenarios" ], "when_not_to_use": [ "For mutually exclusive options (use radio button group instead)", "When only one option can be selected", "For simple binary choices (use single checkbox)", "When space is very limited (consider dropdown instead)" ], "best_practices": [ "Use clear, descriptive legend text for the group", "Keep option labels short and concise", "Group related options logically", "Provide immediate visual feedback for selections", "Ensure adequate touch target size for mobile", "Use error states to indicate validation issues" ], "common_mistakes": [ "Using checkbox button group for mutually exclusive options", "Making labels too long or unclear", "Not providing proper fieldset/legend structure", "Missing error state handling", "Inadequate spacing between buttons" ] }, "code_examples": [ { "title": "Basic Checkbox Button Group", "code": "
\n \n Scheduled Day(s)\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n", "description": "Basic checkbox button group with three day options" }, { "title": "Checkbox Button Group with Error State", "code": "
\n \n Select at least one option\n \n
\n
\n \n \n \n \n \n \n \n \n
\n
\n
This field is required
\n
\n", "description": "Checkbox button group with error state and validation message" }, { "title": "Disabled Checkbox Button Group", "code": "
\n \n Disabled Options\n \n
\n
\n \n \n \n \n \n \n \n \n
\n
\n
\n", "description": "Checkbox button group with disabled state options" } ], "styling_hooks": [], "dependencies": { "css_files": [ "checkbox-button-group.css", "form-element.css", "checkbox-button.css" ], "javascript": [], "icons": [], "other_components": [ "form-element", "checkbox-button" ] }, "related_components": [ { "name": "Checkbox Button", "relationship": "similar", "description": "Individual checkbox buttons that make up the group" }, { "name": "Radio Button Group", "relationship": "alternative", "description": "For mutually exclusive options" }, { "name": "Checkbox", "relationship": "similar", "description": "Standard checkbox input for single selections" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/checkbox-button-group/", "design_guidelines": "https://v1.lightningdesignsystem.com/components/checkbox-button-group/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-01-15", "author": "SLDS Documentation Team", "slds_version": "2.27.2", "review_status": "complete", "source": "official-slds", "notes": "Created from official SLDS documentation and design-system-internal source code with CSS selector annotations" } }, { "name": "Checkbox Button", "description": "A checkbox input styled as a button that allows users to toggle selection states, providing an alternative visual presentation to traditional checkboxes with enhanced interaction design.", "category": "Input", "slds_classes": { "root": "slds-checkbox_button", "elements": [ { "class": "slds-checkbox_button-group", "description": "Container for checkbox button groups", "purpose": "Groups related checkbox buttons" }, { "class": "slds-checkbox_button", "description": "Checkbox button wrapper", "purpose": "Contains checkbox input and label styling" }, { "class": "slds-checkbox_button__label", "description": "Checkbox button label", "purpose": "Provides the button appearance and text" }, { "class": "slds-checkbox_faux", "description": "Visual checkbox indicator", "purpose": "Button-styled visual representation" } ], "modifiers": [], "states": [ { "class": "slds-is-selected", "description": "Selected checkbox button state", "trigger": "Applied when checkbox is checked" }, { "class": "slds-has-focus", "description": "Focused checkbox button state", "trigger": "Applied when checkbox button has focus" }, { "class": "slds-is-disabled", "description": "Disabled checkbox button state", "trigger": "Applied when checkbox is disabled" } ] }, "variants": [ { "name": "Base", "description": "Standard checkbox button", "classes": [ "slds-checkbox_button" ], "usage_context": "Default implementation for button-style checkboxes", "differences": "Basic button-styled checkbox with standard sizing" }, { "name": "Group", "description": "Multiple checkbox buttons in a group", "classes": [ "slds-checkbox_button-group" ], "usage_context": "When multiple related checkbox buttons are used together", "differences": "Grouped layout with consistent spacing and alignment" }, { "name": "Stretch", "description": "Full-width checkbox button", "classes": [ "slds-checkbox_button" ], "usage_context": "When button should fill container width", "differences": "Button stretches to full container width" } ], "lightning_component": { "name": "lightning-checkbox-button", "url": "https://developer.salesforce.com/docs/component-library/overview/components", "mapping_notes": "Checkbox button functionality often implemented through lightning-checkbox-group or custom implementations" }, "accessibility": { "keyboard_support": [ "Tab navigation to checkbox buttons", "Space to toggle checkbox selection", "Arrow keys for group navigation", "Enter to activate checkbox button" ], "screen_reader": [ "Checkbox button state clearly announced", "Selection changes communicated", "Group relationships described" ], "aria_attributes": [ "aria-checked for checkbox state", "aria-describedby for additional information", "aria-labelledby for group labeling", "role='checkbox' for button checkboxes" ] }, "usage_guidelines": { "when_to_use": [ "When checkbox needs button-like appearance", "For toggle selections that benefit from button styling", "In interfaces where buttons provide better UX than checkboxes", "For multi-select options with prominent visual treatment" ], "when_not_to_use": [ "For single yes/no decisions (use radio buttons)", "When traditional checkbox styling is more appropriate", "For simple form inputs without special styling needs" ], "best_practices": [ "Provide clear visual feedback for selection states", "Use consistent sizing within groups", "Ensure adequate touch targets for mobile", "Group related checkbox buttons logically", "Maintain keyboard accessibility" ], "common_mistakes": [ "Using checkbox buttons for mutually exclusive options", "Poor visual distinction between selected/unselected states", "Inconsistent button sizing within groups", "Missing keyboard accessibility" ] }, "code_examples": [ { "title": "Basic Checkbox Button", "description": "Single checkbox styled as a button", "code": "
\n \n
\n \n \n \n \n
\n
\n" }, { "title": "Checkbox Button Group", "description": "Multiple checkbox buttons grouped together", "code": "
\n \n Choose Your Interests\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n" }, { "title": "Stretch Checkbox Buttons", "description": "Full-width checkbox buttons for mobile or constrained layouts", "code": "
\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n" }, { "title": "Compact Checkbox Buttons", "description": "Compact checkbox buttons for limited space", "code": "
\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n" }, { "title": "Disabled Checkbox Button", "description": "Checkbox button in disabled state", "code": "
\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n" }, { "title": "Checkbox Buttons with Description", "description": "Checkbox buttons with additional descriptive text", "code": "
\n \n Select Features\n \n
\n
\n \n \n \n \n \n \n \n \n
\n
\n
\n" } ], "dependencies": { "css_files": [ "checkbox-button.css", "form-element.css" ], "javascript": [ "checkbox-button.js" ], "icons": [ "utility-sprite.svg" ], "other_components": [ "form-element", "checkbox" ] }, "related_components": [ { "name": "Checkbox", "relationship": "alternative", "description": "Traditional checkbox alternative" }, { "name": "Radio Button Group", "relationship": "similar", "description": "Similar grouped selection concept" }, { "name": "Button Group", "relationship": "similar", "description": "Similar button grouping layout" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/checkbox-button/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Checkbox Toggle", "description": "A checkable input that communicates if an option is true, false or indeterminate. A toggle-style checkbox that provides a visual switch interface for binary choices.", "category": "Input", "slds_classes": { "root": "slds-checkbox_toggle", "elements": [ { "class": "slds-checkbox_faux", "description": "Visual toggle switch element", "purpose": "Custom-styled toggle switch appearance that replaces the native checkbox" }, { "class": "slds-checkbox_faux_container", "description": "Container for the faux checkbox element and text labels", "purpose": "Wraps the toggle switch and provides structure for on/off text" }, { "class": "slds-checkbox_off", "description": "Container for text shown when toggle is off", "purpose": "Displays text when checkbox is unchecked" }, { "class": "slds-checkbox_on", "description": "Container for text shown when toggle is on", "purpose": "Displays text when checkbox is checked" } ], "modifiers": [], "states": [ { "class": "slds-is-disabled", "description": "Disabled state styling", "trigger": "When checkbox toggle is not interactive" } ] }, "variants": [ { "name": "Base", "description": "Standard checkbox toggle", "classes": [ "slds-checkbox_toggle" ], "usage_context": "Default checkbox toggle implementation", "differences": "Toggle switch with optional on/off text labels" } ], "lightning_component": { "name": "", "url": "https://developer.salesforce.com/docs/component-library/overview/components", "mapping_notes": "No direct Lightning Base Component - use custom implementation with SLDS classes" }, "accessibility": { "keyboard_support": [ "Tab to focus the checkbox toggle", "Space to toggle checkbox state", "Enter may toggle in some contexts" ], "screen_reader": [ "Checkbox state announced (checked/unchecked)", "Label text read with the checkbox", "Required state announced when applicable", "Error messages associated and announced" ], "aria_attributes": [ "aria-describedby for error messages", "aria-invalid when validation fails", "aria-required for required checkboxes", "aria-checked for state indication", "fieldset and legend for grouped toggles" ] }, "usage_guidelines": { "when_to_use": [ "For binary choices where toggle switch UI is preferred", "When you want a more visual, switch-like interface", "For settings, preferences, or feature toggles", "When space allows for the toggle switch design" ], "when_not_to_use": [ "For mutually exclusive options (use radio buttons)", "When multiple options can be selected (use checkboxes)", "In very constrained spaces (use standard checkbox)", "For actions (use buttons instead)" ], "best_practices": [ "Use clear, descriptive labels", "Provide on/off text labels when helpful", "Use fieldset and legend for grouped toggles", "Ensure adequate touch target size for mobile", "Provide immediate visual feedback for state changes", "Use consistent toggle styling throughout the interface" ], "common_mistakes": [ "Using toggles for mutually exclusive options", "Making labels too long or unclear", "Not providing proper fieldset/legend structure for groups", "Missing required state indicators", "Inadequate spacing or touch targets" ] }, "code_examples": [ { "title": "Basic Checkbox Toggle", "code": "
\n
\n \n
\n
\n" }, { "title": "Checkbox Toggle Checked State", "code": "
\n
\n \n
\n
\n" }, { "title": "Disabled Checkbox Toggle", "code": "
\n
\n \n
\n
\n" } ], "styling_hooks": [ { "name": "--slds-c-checkbox-toggle-color-border", "description": "Border color for the toggle switch", "category": "color" }, { "name": "--slds-c-checkbox-toggle-color-border-hover", "description": "Border color for the toggle switch on hover", "category": "color" }, { "name": "--slds-c-checkbox-toggle-color-background", "description": "Background color for the toggle switch", "category": "color" }, { "name": "--slds-c-checkbox-toggle-color-background-hover", "description": "Hover background color for the toggle switch", "category": "color" }, { "name": "--slds-c-checkbox-toggle-color-background-checked-focus", "description": "Background color when toggle is checked and focused", "category": "color" }, { "name": "--slds-c-checkbox-toggle-switch-color-background", "description": "Background color for the toggle switch slider/knob", "category": "color" }, { "name": "--slds-c-checkbox-toggle-switch-color-background-checked", "description": "Background color for the toggle switch slider/knob when checked", "category": "color" }, { "name": "--slds-c-checkbox-toggle-mark-color-foreground", "description": "Foreground color for the checkmark when toggle is checked", "category": "color" }, { "name": "--slds-c-checkbox-toggle-radius-border", "description": "Border radius for the toggle switch (pill shape)", "category": "border" }, { "name": "--slds-c-checkbox-toggle-shadow", "description": "Box shadow for the toggle switch", "category": "shadow" } ], "dependencies": { "css_files": [ "checkbox-toggle.css", "form-element.css" ], "javascript": [], "icons": [], "other_components": [ "form-element" ] }, "related_components": [ { "name": "Checkbox", "relationship": "alternative", "description": "Standard checkbox for binary choices" }, { "name": "Toggle", "relationship": "similar", "description": "Alternative toggle-style input control" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/checkbox-toggle/", "design_guidelines": "https://v1.lightningdesignsystem.com/components/checkbox-toggle/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "author": "SLDS Documentation Team", "slds_version": "2.27.2", "review_status": "complete", "source": "official-slds", "notes": "Created from official SLDS documentation and design-system-internal source code with CSS selector annotations. Includes comprehensive styling hooks from SCSS annotations. Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Checkbox", "description": "An input control that allows users to select one or more options from a set, providing binary choice selection with clear visual feedback.", "category": "Input", "slds_classes": { "root": "slds-checkbox", "elements": [ { "class": "slds-checkbox__label", "description": "Label element for the checkbox", "purpose": "Provides clickable area and describes the option" } ], "modifiers": [], "states": [ { "class": "slds-has-error", "description": "Error state styling", "trigger": "When checkbox validation fails" }, { "class": "slds-is-disabled", "description": "Disabled state styling", "trigger": "When checkbox is not interactive" } ] }, "variants": [ { "name": "Base", "description": "Standard checkbox input", "classes": [ "slds-checkbox" ], "usage_context": "Default checkbox implementation", "differences": "Standard checkbox with label and custom styling" } ], "lightning_component": { "name": "lightning-input (type='checkbox')", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-input", "mapping_notes": "Mapped through lightning-input with type='checkbox'" }, "accessibility": { "keyboard_support": [ "Tab to focus the checkbox", "Space to toggle checkbox state", "Enter may toggle in some contexts" ], "screen_reader": [ "Checkbox state announced (checked/unchecked)", "Label text read with the checkbox", "Error messages associated and announced" ], "aria_attributes": [ "aria-describedby for error messages", "aria-invalid when validation fails", "aria-required for required checkboxes" ] }, "usage_guidelines": { "when_to_use": [ "For binary choices (yes/no, true/false)", "When users can select multiple options", "For toggling features or settings", "In forms where multiple selections are allowed" ], "when_not_to_use": [ "For mutually exclusive options (use radio buttons)", "When only one option can be selected", "For actions (use buttons instead)" ], "best_practices": [ "Use clear, descriptive labels", "Group related checkboxes logically", "Provide immediate feedback for state changes", "Use consistent checkbox styling throughout the interface", "Ensure adequate touch target size" ], "common_mistakes": [ "Using checkboxes for mutually exclusive options", "Making labels too long or unclear", "Not providing feedback for state changes", "Using checkboxes for actions instead of selections" ] }, "code_examples": [ { "title": "Basic Checkbox", "code": "
\n
\n
\n \n \n
\n
\n
\n" }, { "title": "Checkbox with Error", "code": "
\n
\n
\n \n \n
\n
\n
This field is required
\n
\n" } ], "styling_hooks": [ { "name": "--slds-c-checkbox-color-background", "description": "Background color for checkbox", "category": "color" }, { "name": "--slds-c-checkbox-color-border", "description": "Border color for checkbox", "category": "color" } ], "dependencies": { "css_files": [ "checkbox.css", "form-element.css" ], "javascript": [], "icons": [], "other_components": [ "form-element" ] }, "related_components": [ { "name": "Radio Group", "relationship": "alternative", "description": "For mutually exclusive options" }, { "name": "Checkbox Group", "relationship": "container", "description": "Multiple checkboxes grouped together" }, { "name": "Toggle", "relationship": "similar", "description": "Alternative binary input control" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/checkbox/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Color Picker", "description": "A fully featured color selection component that provides both predefined color swatches and a custom color picker with hue, saturation, and brightness controls. Allows users to select colors visually or input hex values.", "category": "Complex Components", "slds_classes": { "root": "slds-color-picker", "elements": [ { "class": "slds-color-picker__summary-label", "description": "Label for the color summary input", "purpose": "Provides accessible label for color input" }, { "class": "slds-color-picker__summary-button", "description": "Button that toggles the color picker selector", "purpose": "Opens/closes the color selection popover" }, { "class": "slds-color-picker__summary-input", "description": "Input field showing hex color value", "purpose": "Displays and accepts hex color input" }, { "class": "slds-color-picker__selector", "description": "Selector popover component", "purpose": "Container for swatches and custom picker" }, { "class": "slds-color-picker__swatches", "description": "Container for color swatches", "purpose": "Holds predefined color options" }, { "class": "slds-color-picker__swatch", "description": "Individual color swatch", "purpose": "Displays clickable color option" }, { "class": "slds-color-picker__swatch-trigger", "description": "Trigger button for swatch selection", "purpose": "Interactive element for swatch clicks" }, { "class": "slds-color-picker__custom", "description": "Custom color picker container", "purpose": "Holds custom color selection controls" }, { "class": "slds-color-picker__custom-range", "description": "Custom color range selector", "purpose": "2D selector for saturation and brightness" }, { "class": "slds-color-picker__range-indicator", "description": "Indicator for range position", "purpose": "Shows selected point in color range" }, { "class": "slds-color-picker__hue-and-preview", "description": "Container for hue slider and preview", "purpose": "Groups hue control with color preview" }, { "class": "slds-color-picker__hue-slider", "description": "Slider for hue selection", "purpose": "Controls the color hue value" } ], "modifiers": [], "states": [ { "class": "slds-is-open", "description": "Open state for color picker popover", "trigger": "When color picker selector is visible" }, { "class": "slds-is-selected", "description": "Selected state for swatch", "trigger": "When swatch is currently selected color" } ] }, "variants": [ { "name": "Base", "description": "Full color picker with swatches and custom selector", "classes": [ "slds-color-picker" ], "usage_context": "Default color picker implementation", "differences": "Complete color selection interface" } ], "lightning_component": { "name": "lightning-input", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-input", "mapping_notes": "lightning-input with type='color' provides basic color picker, but not as fully featured as SLDS color-picker" }, "accessibility": { "keyboard_support": [ "Tab to navigate between swatches and controls", "Arrow keys to move through swatch grid", "Enter or Space to select swatch", "Arrow keys to adjust hue slider", "Escape to close picker" ], "screen_reader": [ "Color picker role announced", "Selected color value announced", "Swatch colors announced", "Slider values announced" ], "aria_attributes": [ "role='listbox' on swatches container", "role='option' on individual swatches", "aria-label with color name/hex value", "aria-selected on active swatch", "aria-valuemin, aria-valuemax, aria-valuenow on sliders" ] }, "usage_guidelines": { "when_to_use": [ "For selecting brand or theme colors", "When users need to customize colors", "For design or customization features", "When both preset and custom colors are needed" ], "when_not_to_use": [ "For simple binary color choices (use toggle)", "When only preset colors are needed (use swatch selector)", "For system-level color settings", "When color input is too complex for users" ], "best_practices": [ "Provide common color swatches for quick selection", "Allow hex value input for precision", "Show color preview clearly", "Include accessibility contrast indicators", "Group related colors in swatches", "Provide named color options when possible" ], "common_mistakes": [ "Too many swatch options overwhelming users", "Missing hex input option", "Poor contrast in color preview", "Not showing selected color clearly", "Inadequate keyboard navigation" ] }, "code_examples": [ { "title": "Basic Color Picker", "code": "
\n
\n \n \n \n
\n
\n
\n
\n
\n Preset colors\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n
\n
\n
\n

\n Use arrow keys to select saturation and brightness, on an x and y axis.\n

\n
\n \n Saturation: 100%. Brightness: 50%.\n \n
\n
\n
\n \n
\n
\n" } ], "styling_hooks": [], "dependencies": { "css_files": [ "color-picker.css", "popover.css", "swatch.css", "button.css" ], "javascript": [ "Color picker open/close", "Swatch selection", "Custom color range interaction", "Hue slider management", "Hex value validation" ], "icons": [ "utility:down" ], "other_components": [ "popover", "button", "input" ] }, "related_components": [ { "name": "Swatch", "relationship": "contains", "description": "Color swatch display element" }, { "name": "Popover", "relationship": "container", "description": "Popover for color selector" }, { "name": "Slider", "relationship": "similar", "description": "Similar range input pattern" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/color-picker/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "author": "SLDS Documentation Team", "slds_version": "2.27.2", "review_status": "complete", "source": "official-slds", "notes": "Created from official SLDS documentation and design-system-internal source code Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Combobox", "description": "A composite input control that combines a text input with a dropdown list, allowing users to either type or select from predefined options.", "category": "Input", "slds_classes": { "root": "slds-combobox_container", "elements": [ { "class": "slds-combobox", "description": "Main combobox wrapper", "purpose": "Contains the input and dropdown components" }, { "class": "slds-combobox__form-element", "description": "Form element wrapper for the input", "purpose": "Provides form styling and structure" }, { "class": "slds-combobox__input", "description": "Text input element", "purpose": "Allows typing and displays selected value" }, { "class": "slds-combobox__input-entity-icon", "description": "Icon for the selected entity", "purpose": "Visual indicator for selected item type" }, { "class": "slds-listbox", "description": "Dropdown list container", "purpose": "Contains the selectable options" }, { "class": "slds-listbox__option", "description": "Individual option in the dropdown", "purpose": "Represents a selectable item" }, { "class": "slds-listbox__option-meta", "description": "Additional metadata for an option", "purpose": "Contains supplementary option information" } ], "modifiers": [ { "class": "slds-is-open", "description": "Open state for the dropdown", "usage": "When the dropdown list is visible" }, { "class": "slds-has-focus", "description": "Focus state styling", "usage": "When the combobox has keyboard focus" } ], "states": [ { "class": "slds-has-error", "description": "Error state styling", "trigger": "When combobox validation fails" } ] }, "variants": [ { "name": "Base", "description": "Standard combobox with dropdown options", "classes": [ "slds-combobox_container" ], "usage_context": "Default combobox implementation", "differences": "Text input with dropdown list of options" } ], "lightning_component": { "name": "lightning-combobox", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox", "mapping_notes": "Direct mapping - Lightning component implements SLDS combobox blueprint" }, "accessibility": { "keyboard_support": [ "Tab to focus the combobox", "Arrow keys to navigate dropdown options", "Enter to select highlighted option", "Escape to close dropdown", "Type to filter options" ], "screen_reader": [ "Combobox role and state announced", "Option count and current selection announced", "Filtered results communicated" ], "aria_attributes": [ "role='combobox' on input element", "aria-expanded to indicate dropdown state", "aria-activedescendant for current option", "aria-autocomplete for input behavior", "role='listbox' for dropdown container", "role='option' for individual items" ] }, "usage_guidelines": { "when_to_use": [ "When users need to select from a large list of options", "For autocomplete or search functionality", "When typing to filter is beneficial", "For lookups and entity selection" ], "when_not_to_use": [ "For small, fixed lists (use select instead)", "When only pre-defined options are allowed (use select)", "For binary choices (use checkbox or radio)" ], "best_practices": [ "Provide helpful placeholder text", "Show option count when filtering", "Include clear visual feedback for selection", "Handle empty states gracefully", "Support keyboard navigation completely" ], "common_mistakes": [ "Not providing keyboard navigation", "Unclear filtering behavior", "Poor empty state handling", "Inadequate loading states" ] }, "code_examples": [ { "title": "Basic Combobox", "code": "
\n
\n
\n \n \n \n \n \n \n
\n
\n
    \n
  • \n
    \n \n Option One\n \n
    \n
    • \n
\n
\n
\n
\n" } ], "styling_hooks": [], "dependencies": { "css_files": [ "combobox.css", "listbox.css", "dropdown.css", "input.css" ], "javascript": [ "combobox.js" ], "icons": [ "utility-sprite.svg" ], "other_components": [ "input", "listbox", "dropdown", "icons" ] }, "related_components": [ { "name": "Select", "relationship": "alternative", "description": "For smaller, fixed option lists" }, { "name": "Lookup", "relationship": "similar", "description": "Similar search and select pattern" }, { "name": "Picklist", "relationship": "alternative", "description": "Alternative selection control" } ], "references": { "official_docs": "https://v1.lightningdesignsystem.com/components/combobox/" }, "metadata": { "version": "1.0.0", "last_updated": "2025-11-12", "review_status": "complete", "notes": " Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth." } }, { "name": "Counter", "description": "A number input field with increment and decrement buttons, allowing users to adjust numeric values using buttons or direct input. Commonly used for quantity selection, age input, or any numeric field where step-wise adjustment is helpful.", "category": "Input", "slds_classes": { "root": "slds-input_counter", "elements": [ { "class": "slds-input_counter", "description": "Variant for number input with increment and decrement buttons", "purpose": "Creates a centered number input field with padding for button placement" }, { "class": "slds-input__button_decrement", "description": "Decrement button within counter input field", "purpose": "Positions the minus/decrement button on the left side of the input" }, { "class": "slds-input__button_increment", "description": "Increment button within counter input field", "purpose": "Positions the plus/increment button on the right side of the input" } ], "modifiers": [], "states": [] }, "variants": [ { "name": "Base", "description": "Standard number input with increment/decrement buttons", "classes": [ "slds-input_counter" ], "usage_context": "Default implementation for numeric input with buttons", "differences": "Input field centered with buttons on left and right" } ], "lightning_component": { "name": "lightning-input", "url": "https://developer.salesforce.com/docs/component-library/bundle/lightning-input", "mapping_notes": "Use type='number' with lightning-input, counter styling is applied automatically" }, "accessibility": { "keyboard_support": [ "Tab to navigate to the input field", "Arrow keys or direct typing to change value", "Enter to submit if in a form", "Click or Space on increment/decrement buttons" ], "screen_reader": [ "Input field should have a descriptive label", "Current value should be announced when changed", "Min and max values should be communicated" ], "aria_attributes": [ "aria-label or associated