Google Git
Sign in
apache / superset-site / 47d44c67ee52af397def4fbd51dd73b9759ddca3 / . / developer_portal / guidelines / design-guidelines / index.html
blob: 7fa5067a4f1ec078405a9a583c23c20cf7820356 [file] [log] [blame]
<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-developer_portal docs-version-current docs-doc-page docs-doc-id-guidelines/design-guidelines" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.9.1">
<title data-rh="true">Design Guidelines | Superset</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://superset.apache.org/developer_portal/guidelines/design-guidelines"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-developer_portal-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-developer_portal-current"><meta data-rh="true" property="og:title" content="Design Guidelines | Superset"><meta data-rh="true" name="description" content="&lt;!--"><meta data-rh="true" property="og:description" content="&lt;!--"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://superset.apache.org/developer_portal/guidelines/design-guidelines"><link data-rh="true" rel="alternate" href="https://superset.apache.org/developer_portal/guidelines/design-guidelines" hreflang="en"><link data-rh="true" rel="alternate" href="https://superset.apache.org/developer_portal/guidelines/design-guidelines" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://WR5FASX5ED-dsn.algolia.net" crossorigin="anonymous"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Design Guidelines","item":"https://superset.apache.org/developer_portal/guidelines/design-guidelines"}]}</script><link rel="search" type="application/opensearchdescription+xml" title="Superset" href="/opensearch.xml">
<script src="https://widget.kapa.ai/kapa-widget.bundle.js" async data-website-id="c6a8a8b8-3127-48f9-97a7-51e9e10d20d0" data-project-name="Apache Superset" data-project-color="#FFFFFF" data-project-logo="https://images.seeklogo.com/logo-png/50/2/superset-icon-logo-png_seeklogo-500354.png" data-modal-override-open-id="ask-ai-input" data-modal-override-open-class="search-input" data-modal-disclaimer="This is a custom LLM for Apache Superset with access to all [documentation](superset.apache.org/docs/intro/), [GitHub Open Issues, PRs and READMEs](github.com/apache/superset).&amp;#10;&amp;#10;Companies deploy assistants like this ([built by kapa.ai](https://kapa.ai)) on docs via [website widget](https://docs.kapa.ai/integrations/website-widget) (Docker, Reddit), in [support forms](https://docs.kapa.ai/integrations/support-form-deflector) for ticket deflection (Monday.com, Mapbox), or as [Slack bots](https://docs.kapa.ai/integrations/slack-bot) with private sources." data-modal-example-questions="How do I install Superset?,How can I contribute to Superset?" data-button-text-color="rgb(81,166,197)" data-modal-header-bg-color="#ffffff" data-modal-title-color="rgb(81,166,197)" data-modal-title="Apache Superset AI" data-modal-disclaimer-text-color="#000000" data-consent-required="true" data-consent-screen-disclaimer="By clicking &quot;I agree, let&#39;s chat&quot;, you consent to the use of the AI assistant in accordance with kapa.ai&#39;s [Privacy Policy](https://www.kapa.ai/content/privacy-policy). This service uses reCAPTCHA, which requires your consent to Google&#39;s [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms). By proceeding, you explicitly agree to both kapa.ai&#39;s and Google&#39;s privacy policies."></script><link rel="stylesheet" href="/assets/css/styles.50a8e575.css">
<script src="/assets/js/runtime~main.561be90a.js" defer="defer"></script>
<script src="/assets/js/main.d29ac954.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<svg style="display: none;"><defs>
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
</defs></svg>
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/superset-logo-horiz.svg" alt="Superset Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/superset-logo-horiz-dark.svg" alt="Superset Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div></a><div class="navbar__item dropdown dropdown--hoverable"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">Documentation</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/6.0.0/intro">Getting Started</a></li><li><a class="dropdown__link" href="/docs/6.0.0/faq">FAQ</a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href="/community">Community Resources</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/community">Resources</a></li><li><a href="https://github.com/apache/superset" target="_blank" rel="noopener noreferrer" class="dropdown__link">GitHub<svg width="12" height="12" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li><a href="http://bit.ly/join-superset-slack" target="_blank" rel="noopener noreferrer" class="dropdown__link">Slack<svg width="12" height="12" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li><a href="https://lists.apache.org/list.html?dev@superset.apache.org" target="_blank" rel="noopener noreferrer" class="dropdown__link">Mailing List<svg width="12" height="12" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li><a href="https://stackoverflow.com/questions/tagged/apache-superset" target="_blank" rel="noopener noreferrer" class="dropdown__link">Stack Overflow<svg width="12" height="12" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a class="navbar__item navbar__link default-button-theme get-started-button" href="/docs/intro">Get Started</a><a href="https://github.com/apache/superset" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link github-button"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Meta+k)" aria-keyshortcuts="Meta+k"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8" stroke="currentColor" fill="none" stroke-width="1.4"></circle><path d="m21 21-4.3-4.3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/developer_portal/"><span title="Overview" class="linkLabel_WmDU">Overview</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/developer_portal/extensions/overview"><span title="Extensions" class="categoryLinkLabel_W154">Extensions</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/developer_portal/testing/overview"><span title="Testing" class="categoryLinkLabel_W154">Testing</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/developer_portal/contributing/overview"><span title="Contributing to Superset" class="categoryLinkLabel_W154">Contributing to Superset</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/developer_portal/contributing/overview"><span title="Contributing Overview" class="linkLabel_WmDU">Contributing Overview</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/developer_portal/contributing/development-setup"><span title="Setting up a Development Environment" class="linkLabel_WmDU">Setting up a Development Environment</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/developer_portal/contributing/submitting-pr"><span title="Submitting Pull Requests" class="linkLabel_WmDU">Submitting Pull Requests</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/developer_portal/contributing/guidelines"><span title="Contribution Guidelines" class="linkLabel_WmDU">Contribution Guidelines</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/developer_portal/contributing/code-review"><span title="Code Review Process" class="linkLabel_WmDU">Code Review Process</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/developer_portal/contributing/issue-reporting"><span title="Issue Reporting" class="linkLabel_WmDU">Issue Reporting</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/developer_portal/contributing/howtos"><span title="Development How-tos" class="linkLabel_WmDU">Development How-tos</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/developer_portal/contributing/release-process"><span title="Release Process" class="linkLabel_WmDU">Release Process</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/developer_portal/contributing/resources"><span title="Resources" class="linkLabel_WmDU">Resources</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" tabindex="0" href="/developer_portal/guidelines/design-guidelines"><span title="Contribution Guidelines" class="categoryLinkLabel_W154">Contribution Guidelines</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/developer_portal/guidelines/design-guidelines"><span title="Design Guidelines" class="linkLabel_WmDU">Design Guidelines</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/developer_portal/guidelines/frontend-style-guidelines"><span title="Frontend Style Guidelines" class="categoryLinkLabel_W154">Frontend Style Guidelines</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/developer_portal/guidelines/backend-style-guidelines"><span title="Backend Style Guidelines" class="categoryLinkLabel_W154">Backend Style Guidelines</span></a></div></li></ul></li></ul></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_kv0_"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="theme-doc-version-banner alert alert--warning margin-bottom--md" role="alert"><div>This is unreleased documentation for <!-- -->Superset<!-- --> <b>Next</b> version.</div><div class="margin-top--md">For up-to-date documentation, see the <b><a href="/developer_portal/guidelines/design-guidelines">latest version</a></b> (<!-- -->Next<!-- -->).</div></div><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Contributing to Superset</span></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Contribution Guidelines</span></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Design Guidelines</span></li></ul></nav><span class="versionBadge_QOso">Version:<!-- --> <a class="ant-dropdown-trigger versionSelector_oOvN">Next<!-- --> <span role="img" aria-label="down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></a></span><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Design Guidelines</h1></header>
<p>This is an area to host resources and documentation supporting the evolution and proper use of Superset design system elements. If content is to be added to this section or requires revisiting, a proposal should be submitted to the <code>dev@superset.apache.org</code> email list with either a text proposal or a link to a GitHub issue providing the markdown that will be added to this wiki. The Dev list will have the chance to review the proposal and arrive at lazy consensus. A committer may then copy/paste the markdown to this wiki, and make it public.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="capitalization-guidelines">Capitalization Guidelines<a href="#capitalization-guidelines" class="hash-link" aria-label="Direct link to Capitalization Guidelines" title="Direct link to Capitalization Guidelines" translate="no">​</a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="sentence-case">Sentence case<a href="#sentence-case" class="hash-link" aria-label="Direct link to Sentence case" title="Direct link to Sentence case" translate="no">​</a></h3>
<p>Use sentence-case capitalization for everything in the UI (except these **).</p>
<p>Sentence case is predominantly lowercase. Capitalize only the initial character of the first word, and other words that require capitalization, like:</p>
<ul>
<li><strong>Proper nouns.</strong> Objects in the product <em>are not</em> considered proper nouns e.g. dashboards, charts, saved queries etc. Proprietary feature names eg. SQL Lab, Preset Manager <em>are</em> considered proper nouns</li>
<li><strong>Acronyms</strong> (e.g. CSS, HTML)</li>
<li>When referring to <strong>UI labels that are themselves capitalized</strong> from sentence case (e.g. page titles - Dashboards page, Charts page, Saved queries page, etc.)</li>
<li>User input that is reflected in the UI. E.g. a user-named a dashboard tab</li>
</ul>
<p><strong>Sentence case vs. Title case:</strong> Title case: &quot;A Dog Takes a Walk in Paris&quot; Sentence case: &quot;A dog takes a walk in Paris&quot;</p>
<p><strong>Why sentence case?</strong></p>
<ul>
<li>It&#x27;s generally accepted as the quickest to read</li>
<li>It&#x27;s the easiest form to distinguish between common and proper nouns</li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="how-to-refer-to-ui-elements">How to refer to UI elements<a href="#how-to-refer-to-ui-elements" class="hash-link" aria-label="Direct link to How to refer to UI elements" title="Direct link to How to refer to UI elements" translate="no">​</a></h3>
<p>When writing about a UI element, use the same capitalization as used in the UI.</p>
<p>For example, if an input field is labeled &quot;Name&quot; then you refer to this as the &quot;Name input field&quot;. Similarly, if a button has the label &quot;Save&quot; in it, then it is correct to refer to the &quot;Save button&quot;.</p>
<p>Where a product page is titled &quot;Settings&quot;, you refer to this in writing as follows: &quot;Edit your personal information on the Settings page&quot;.</p>
<p>Often a product page will have the same title as the objects it contains. In this case, refer to the page as it appears in the UI, and the objects as common nouns:</p>
<ul>
<li>Upload a dashboard on the Dashboards page</li>
<li>Go to Dashboards</li>
<li>View dashboard</li>
<li>View all dashboards</li>
<li>Upload CSS templates on the CSS templates page</li>
<li>Queries that you save will appear on the Saved queries page</li>
<li>Create custom queries in SQL Lab then create dashboards</li>
</ul>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="exceptions-to-sentence-case"><strong>Exceptions to sentence case:</strong><a href="#exceptions-to-sentence-case" class="hash-link" aria-label="Direct link to exceptions-to-sentence-case" title="Direct link to exceptions-to-sentence-case" translate="no">​</a></h3>
<ol>
<li>Acronyms and abbreviations. Examples: URL, CSV, XML</li>
</ol>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="button-design-guidelines">Button Design Guidelines<a href="#button-design-guidelines" class="hash-link" aria-label="Direct link to Button Design Guidelines" title="Direct link to Button Design Guidelines" translate="no">​</a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="overview">Overview<a href="#overview" class="hash-link" aria-label="Direct link to Overview" title="Direct link to Overview" translate="no">​</a></h3>
<p><strong>Button variants:</strong></p>
<ol>
<li>Primary</li>
<li>Secondary</li>
<li>Tertiary</li>
<li>Destructive</li>
</ol>
<p><strong>Button styles:</strong> Each button variant has three styles:</p>
<ol>
<li>Text</li>
<li>Icon+text</li>
<li>Icon only</li>
</ol>
<p>Primary buttons have a fourth style: dropdown.</p>
<p><strong>Usage:</strong> Buttons communicate actions that users can take. Do not use for navigations, instead use links.</p>
<p><strong>Purpose:</strong></p>
<table><thead><tr><th>Button Type</th><th>Description</th></tr></thead><tbody><tr><td>Primary</td><td>Main call to action, just 1 per page not including modals or main headers</td></tr><tr><td>Secondary</td><td>Secondary actions, always in conjunction with a primary</td></tr><tr><td>Tertiary</td><td>For less prominent actions; can be used in isolation or paired with a primary button</td></tr><tr><td>Destructive</td><td>For actions that could have destructive effects on the user&#x27;s data</td></tr></tbody></table>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="error-message-design-guidelines">Error Message Design Guidelines<a href="#error-message-design-guidelines" class="hash-link" aria-label="Direct link to Error Message Design Guidelines" title="Direct link to Error Message Design Guidelines" translate="no">​</a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="definition">Definition<a href="#definition" class="hash-link" aria-label="Direct link to Definition" title="Direct link to Definition" translate="no">​</a></h3>
<p>Interface errors appear when the application can&#x27;t do what the user wants, typically because:</p>
<ul>
<li>The app technically fails to complete the request</li>
<li>The app can&#x27;t understand the user input</li>
<li>The user tries to combine operations that can&#x27;t work together</li>
</ul>
<p>In all cases, encountering errors increases user friction and frustration while trying to use the application. Providing an error experience that helps the user understand what happened and their next steps is key to building user confidence and increasing engagement.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="general-best-practices">General best practices<a href="#general-best-practices" class="hash-link" aria-label="Direct link to General best practices" title="Direct link to General best practices" translate="no">​</a></h3>
<p><strong>The best error experience is no error at all.</strong> Before implementing error patterns, consider what you might do in the interface before the user would encounter an error to prevent it from happening at all. This might look like:</p>
<ul>
<li>Providing tooltips or microcopy to help users understand how to interact with the interface</li>
<li>Disabling parts of the UI until desired conditions are met (e.g. disabling a Save button until mandatory fields in a form are completed)</li>
<li>Correcting an error automatically (e.g. autocorrecting spelling errors)</li>
</ul>
<p><strong>Only report errors users care about.</strong> The only errors that should appear in the interface are errors that require user acknowledgement and action (even if that action is &quot;try again later&quot; or &quot;contact support&quot;).</p>
<p><strong>Do not start the user in an error state.</strong> If user inputs are required to display an initial interface (e.g. a chart in Explore), use empty states or field highlighting to drive users to the required action.</p>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="patterns">Patterns<a href="#patterns" class="hash-link" aria-label="Direct link to Patterns" title="Direct link to Patterns" translate="no">​</a></h3>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="pattern-selection">Pattern selection<a href="#pattern-selection" class="hash-link" aria-label="Direct link to Pattern selection" title="Direct link to Pattern selection" translate="no">​</a></h4>
<p>Select one pattern per error (e.g. do not implement an inline and banner pattern for the same error).</p>
<table><thead><tr><th>When the error...</th><th>Use...</th></tr></thead><tbody><tr><td>Is directly related to a UI control</td><td>Inline error</td></tr><tr><td>Is not directly related to a UI control</td><td>Banner error</td></tr></tbody></table>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="inline">Inline<a href="#inline" class="hash-link" aria-label="Direct link to Inline" title="Direct link to Inline" translate="no">​</a></h4>
<p>Inline errors are used when the source of the error is directly related to a UI control (text input, selector, etc.) such as the user not populating a required field or entering a number in a text field.</p>
<h5 class="anchor anchorWithStickyNavbar_LWe7" id="anatomy">Anatomy<a href="#anatomy" class="hash-link" aria-label="Direct link to Anatomy" title="Direct link to Anatomy" translate="no">​</a></h5>
<p>Use the <code>LabeledErrorBoundInput</code> component for this error pattern.</p>
<ol>
<li><strong>Message</strong> Provides direction on how to populate the input correctly.</li>
</ol>
<h5 class="anchor anchorWithStickyNavbar_LWe7" id="implementation-details">Implementation details<a href="#implementation-details" class="hash-link" aria-label="Direct link to Implementation details" title="Direct link to Implementation details" translate="no">​</a></h5>
<ul>
<li>Where and when relevant, scroll the screen to the UI control with the error</li>
</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/apache/superset/edit/master/docs/developer_portal/developer_portal/guidelines/design-guidelines.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2025-10-14T23:58:39.000Z" itemprop="dateModified">Oct 14, 2025</time></b> by <b>dependabot[bot]</b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/developer_portal/contributing/resources"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Resources</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/developer_portal/guidelines/frontend-style-guidelines"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Frontend Style Guidelines</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#capitalization-guidelines" class="table-of-contents__link toc-highlight">Capitalization Guidelines</a><ul><li><a href="#sentence-case" class="table-of-contents__link toc-highlight">Sentence case</a></li><li><a href="#how-to-refer-to-ui-elements" class="table-of-contents__link toc-highlight">How to refer to UI elements</a></li><li><a href="#exceptions-to-sentence-case" class="table-of-contents__link toc-highlight"><strong>Exceptions to sentence case:</strong></a></li></ul></li><li><a href="#button-design-guidelines" class="table-of-contents__link toc-highlight">Button Design Guidelines</a><ul><li><a href="#overview" class="table-of-contents__link toc-highlight">Overview</a></li></ul></li><li><a href="#error-message-design-guidelines" class="table-of-contents__link toc-highlight">Error Message Design Guidelines</a><ul><li><a href="#definition" class="table-of-contents__link toc-highlight">Definition</a></li><li><a href="#general-best-practices" class="table-of-contents__link toc-highlight">General best practices</a></li><li><a href="#patterns" class="table-of-contents__link toc-highlight">Patterns</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">
<div class="footer__applitools">
We use &nbsp;<a href="https://applitools.com/" target="_blank" rel="nofollow"><img src="/img/applitools.png" title="Applitools"></a>
</div>
<p>Copyright © 2024,
The <a href="https://www.apache.org/" target="_blank" rel="noreferrer">Apache Software Foundation</a>,
Licensed under the Apache <a href="https://apache.org/licenses/LICENSE-2.0" target="_blank" rel="noreferrer">License</a>.</p>
<p><small>Apache Superset, Apache, Superset, the Superset logo, and the Apache feather logo are either registered trademarks or trademarks of The Apache Software Foundation. All other products or name brands are trademarks of their respective holders, including The Apache Software Foundation.
<a href="https://www.apache.org/" target="_blank">Apache Software Foundation</a> resources</small></p>
<img class="footer__divider" src="/img/community/line.png" alt="Divider">
<p>
<small>
<a href="/docs/security/" target="_blank" rel="noreferrer">Security</a>&nbsp;|&nbsp;
<a href="https://www.apache.org/foundation/sponsorship.html" target="_blank" rel="noreferrer">Donate</a>&nbsp;|&nbsp;
<a href="https://www.apache.org/foundation/thanks.html" target="_blank" rel="noreferrer">Thanks</a>&nbsp;|&nbsp;
<a href="https://apache.org/events/current-event" target="_blank" rel="noreferrer">Events</a>&nbsp;|&nbsp;
<a href="https://apache.org/licenses/" target="_blank" rel="noreferrer">License</a>&nbsp;|&nbsp;
<a href="https://privacy.apache.org/policies/privacy-policy-public.html" target="_blank" rel="noreferrer">Privacy</a>
</small>
</p>
<!-- telemetry/analytics pixel: -->
<img referrerpolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=39ae6855-95fc-4566-86e5-360d542b0a68">
</div></div></div></footer></div>
</body>
</html>