CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Segmented Control - Design System - Ubuntu Community Hub</title> <meta name="description" content="Introduction We have recently started using a segmented button in some of our websites without any consistency in the rules of when to use it or how it differs from the tabs that already exist in Vanilla. This document a&hellip;"> <meta name="generator" content="Discourse 3.3.0 - https://github.com/discourse/discourse version 5bbdc8a813caf55ab3147ac65b5ffafb5e0aab90"> <link rel="icon" type="image/png" href="https://ubuntucommunity.s3.us-east-2.amazonaws.com/optimized/3X/b/e/be7e4cc6ef7ce95e285337634be009b70561d719_2_32x32.png"> <link rel="apple-touch-icon" type="image/png" href="https://ubuntucommunity.s3.us-east-2.amazonaws.com/optimized/3X/f/3/f38b9c7e7decc51bc26320541c441bfa28f99298_2_180x180.png"> <meta name="theme-color" media="all" content="#ffffff"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <link rel="canonical" href="https://discourse.ubuntu.com/t/segmented-control/26835" /> <link rel="search" type="application/opensearchdescription+xml" href="https://discourse.ubuntu.com/opensearch.xml" title="Ubuntu Community Hub Search"> <link href="/stylesheets/color_definitions_base__2_df74468083942b54f113bf203828e942e534e4d1.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" class="light-scheme"/> <link href="/stylesheets/desktop_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop" /> <link href="/stylesheets/checklist_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="checklist" /> <link href="/stylesheets/discourse-calendar_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-calendar" /> <link href="/stylesheets/discourse-data-explorer_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-data-explorer" /> <link href="/stylesheets/discourse-details_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-details" /> <link href="/stylesheets/discourse-gamification_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-gamification" /> <link href="/stylesheets/discourse-lazy-videos_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-lazy-videos" /> <link href="/stylesheets/discourse-local-dates_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-local-dates" /> <link href="/stylesheets/discourse-narrative-bot_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-narrative-bot" /> <link href="/stylesheets/discourse-presence_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-presence" /> <link href="/stylesheets/discourse-rad-plugin_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-rad-plugin" /> <link href="/stylesheets/discourse-solved_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-solved" /> <link href="/stylesheets/discourse-templates_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-templates" /> <link href="/stylesheets/markdown-note_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="markdown-note" /> <link href="/stylesheets/poll_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="poll" /> <link href="/stylesheets/spoiler-alert_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="spoiler-alert" /> <link href="/stylesheets/discourse-calendar_desktop_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-calendar_desktop" /> <link href="/stylesheets/discourse-gamification_desktop_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="discourse-gamification_desktop" /> <link href="/stylesheets/poll_desktop_28a837c05d70a85189de74e4d2b9a680476b6386.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="poll_desktop" /> <link href="/stylesheets/desktop_theme_13_cadacaca089968feaf85c1112034a85b61733571.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="13" data-theme-name="md-composer-extras"/> <link href="/stylesheets/desktop_theme_10_d5bea094e79bb071f148ac7a6ea3cb8d1021508b.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="10" data-theme-name="ubuntu discourse"/> <link href="/stylesheets/desktop_theme_2_60b21d2c77ece1ab26a5e1d4ab37af1304c3ff26.css?__ws=discourse.ubuntu.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="2" data-theme-name="default"/> <link href="https://fonts.googleapis.com/css?family=Ubuntu:100,300,400" rel="stylesheet"> <style> body { font-family: 'Ubuntu', sans-serif; font-weight: 400; } h1 { font-weight: 100; } </style> <meta name="google-site-verification" content="grFP-bTinUn8jXfEmhZCV8ccDV1IJG2wexOuguu7z_M"> <script defer="" src="/theme-javascripts/f7a737190fe36b9aee0dd740a1ddde023af282d4.js?__ws=discourse.ubuntu.com" data-theme-id="2" nonce="dJovPa1NhpvAwqTxOhe3iQJ5R"></script> <link href="https://fonts.googleapis.com/css?family=Ubuntu:100,400,700" rel="stylesheet" type="text/css"> <script defer="" src="/theme-javascripts/1d29d1e3d25a498707fc181a041c9152fb489073.js?__ws=discourse.ubuntu.com" data-theme-id="13" nonce="dJovPa1NhpvAwqTxOhe3iQJ5R"></script> <script defer="" src="/theme-javascripts/5fd6ab93349b47da044725d430da846ba195a894.js?__ws=discourse.ubuntu.com" data-theme-id="15" nonce="dJovPa1NhpvAwqTxOhe3iQJ5R"></script> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'Segmented Control'" href="https://discourse.ubuntu.com/t/segmented-control/26835.rss" /> <meta property="og:site_name" content="Ubuntu Community Hub" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta property="og:image" content="https://ubuntucommunity.s3.us-east-2.amazonaws.com/original/3X/9/0/905b15b7d477513b2af0668c333736b100eef109.svg" /> <meta property="og:url" content="https://discourse.ubuntu.com/t/segmented-control/26835" /> <meta name="twitter:url" content="https://discourse.ubuntu.com/t/segmented-control/26835" /> <meta property="og:title" content="Segmented Control" /> <meta name="twitter:title" content="Segmented Control" /> <meta property="og:description" content="Introduction We have recently started using a segmented button in some of our websites without any consistency in the rules of when to use it or how it differs from the tabs that already exist in Vanilla. This document aims to give some context on when to use a segmented button v. the traditional tabs, and what are the variants of this component. Considerations Most design systems only use tabs. This is what is currently available in some of them: Apple iOS Guidelines Tab bar: it’s mainly a ..." /> <meta name="twitter:description" content="Introduction We have recently started using a segmented button in some of our websites without any consistency in the rules of when to use it or how it differs from the tabs that already exist in Vanilla. This document aims to give some context on when to use a segmented button v. the traditional tabs, and what are the variants of this component. Considerations Most design systems only use tabs. This is what is currently available in some of them: Apple iOS Guidelines Tab bar: it’s mainly a ..." /> <meta property="og:article:section" content="Design System" /> <meta property="og:article:section:color" content="0088CC" /> <meta property="og:article:tag" content="component" /> <meta property="og:article:tag" content="design-guidelines" /> <meta name="twitter:label1" value="Reading time" /> <meta name="twitter:data1" value="2 mins 🕑" /> <meta name="twitter:label2" value="Likes" /> <meta name="twitter:data2" value="2 ❤" /> <meta property="article:published_time" content="2023-03-08T14:34:08+00:00" /> <meta property="og:ignore_canonical" content="true" /> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"Segmented Control","mainEntity":{"@type":"Question","name":"Segmented Control","text":"Introduction\n\nWe have recently started using a segmented button in some of our websites without any consistency in the rules of when to use it or how it differs from the tabs that already exist in Vanilla. This document aims to give some context on when to use a segmented button v. the traditional ta…","upvoteCount":1,"answerCount":0,"datePublished":"2022-02-23T14:05:45.220Z","author":{"@type":"Person","name":"danielmutis","url":"https://discourse.ubuntu.com/u/danielmutis"}}}</script> </head> <body class="crawler browser-update"> <nav class="p-navigation--secondary"> <div class="u-fixed-width"> <a class="p-navigation--secondary__banner" href="/"> <h5 class="p-navigation--secondary__logo"> Discourse </h5> </a> </div> </nav> <header> <a href="/"> Ubuntu Community Hub </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/segmented-control/26835">Segmented Control</a> </h1> <div class="topic-category" itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/c/design-system/98" class="badge-wrapper bullet" itemprop="item"> <span class='badge-category-bg' style='background-color: #0088CC'></span> <span class='badge-category clear-badge'> <span class='category-name' itemprop='name'>Design System</span> </span> </a> <meta itemprop="position" content="1" /> </span> </div> <div class="topic-category"> <div class='discourse-tags list-tags'> <a href='https://discourse.ubuntu.com/tag/component' class='discourse-tag' rel="tag">component</a>, <a href='https://discourse.ubuntu.com/tag/design-guidelines' class='discourse-tag' rel="tag">design-guidelines</a> </div> </div> </div> <div itemscope itemtype='http://schema.org/DiscussionForumPosting'> <meta itemprop='headline' content='Segmented Control'> <link itemprop='url' href='https://discourse.ubuntu.com/t/segmented-control/26835'> <meta itemprop='datePublished' content='2022-02-23T14:05:45Z'> <meta itemprop='articleSection' content='Design System'> <meta itemprop='keywords' content='component, design-guidelines'> <div itemprop='publisher' itemscope itemtype="http://schema.org/Organization"> <meta itemprop='name' content='Canonical Inc.'> <div itemprop='logo' itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop='url' content='https://ubuntucommunity.s3.us-east-2.amazonaws.com/original/3X/d/1/d1318a905da7b730a81d0b3f393762cb7d478e38.svg'> </div> </div> <div id='post_1' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.ubuntu.com/u/danielmutis'><span itemprop='name'>danielmutis</span></a> </span> <link itemprop="mainEntityOfPage" href="https://discourse.ubuntu.com/t/segmented-control/26835"> <span class="crawler-post-infos"> <time datetime='2022-02-23T14:05:45Z' class='post-time'> February 23, 2022, 2:05pm </time> <meta itemprop='dateModified' content='2023-03-08T14:33:54Z'> <span itemprop='position'>1</span> </span> </div> <div class='post' itemprop='text'> <h2>Introduction</h2> <p>We have recently started using a segmented button in some of our websites without any consistency in the rules of when to use it or how it differs from the tabs that already exist in Vanilla. This document aims to give some context on when to use a segmented button v. the traditional tabs, and what are the variants of this component.</p> <h2>Considerations</h2> <p>Most design systems only use tabs. This is what is currently available in some of them:</p> <h3>Apple iOS Guidelines</h3> <ul> <li> <a href="https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/">Tab bar:</a> it’s mainly a navigation bar used at the bottom of the screen on different apps.</li> <li> <a href="https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/">Segmented control: </a>it’s a mutually exclusive button. Works similar to our tabs, although they say they can be used often to switch between views (on maps for example).</li> </ul> <h3>Carbon</h3> <ul> <li> <a href="https://www.carbondesignsystem.com/components/tabs/usage/">Tabs: </a>they only have a tab component which is similar to the one we have on vanilla. They have one variation similar to the tabs on a folder, which they specify is mainly for use in large sections of a page, whereas the normal tab without a container is for smaller contexts on the page, like tabs on a card.</li> </ul> <h3>Material Design</h3> <ul> <li> <a href="https://material.io/components/tabs#fixed-tabs">Tabs: </a>in material they have tabs that are modular. With a shadow they are used for navigation, at the header of a page for example. They also have a lighter version without a shadow which is similar to the one in Vanilla. They have an option with icons on the left side of the label or on top.</li> </ul> <h2>Variants</h2> <h3>Regular</h3> <h4>With icon</h4> <p><img src="https://lh3.googleusercontent.com/L6ItDCo0gk9dpUAGnl0WbXYb8MQ8njbNYTLYnUoYm1l3vO40D4AOHzUMFE65VUpFj_Mpza69QD2hZnxmAeJZrZwQ3-x6TeD5hDc1hV4WLMILYv-BzR8PsDxQBaN7twvCkJc1xIIL" alt="\ 263x53" width="" height=""></p> <h4>Without icon</h4> <p><img src="https://lh4.googleusercontent.com/Jzr65nIsgqOZW8QCUkBvMO6RVSxIFSgI727zrMUSpWWH2F4o_Ve3b2dKO3Xueg_XIuyDf8qmpFasCtD4NBuI1cSyrpQQqgE0sMBRsllUgzzk5RBjzkD4M3_rhoYsx1qvDHapVFWM" alt="\ 205x52" width="" height=""></p> <h3>Dense</h3> <h4>With icon</h4> <p><img src="https://lh6.googleusercontent.com/0yQv9JmhhrowvJxpIGeyfNPVsgY19Qd2HDhE9MPSmbwoMUVXm7tRLDzJyuP5ZesCZ2IH5dh33gPb7qrXSROKYqR_gNwzH21JC8DIIOv2XJ2THB-BYW1zmSLf5wCkSGy49hyfMBag" alt="\ 267x46" width="" height=""></p> <h4>Without icon</h4> <p><img src="https://lh6.googleusercontent.com/IDNLyDhjrcgM50MuvSqGqwbEObQoJRDNnZZIqv6Z0sam9rV0hl9x38txjkKL4XSqmZxO7aIyDQ_7mO4ng4_M9CZoGSTNEHUHWukpLl9GdEYNmwuuYfR1Iy1InSVNdoHZl57GO08j" alt="\ 205x47" width="" height=""></p> <h2>Usage</h2> <p>There are two main scenarios for using the segmented control:</p> <ul> <li> <p><strong>Secondary tabs:</strong> if the page already has a set of primary tabs used as navigation, these can be used as a sub-navigation of those primary tabs. The use of icons or the size of the button depends on a case by case basis. For example on the JAAS dashboard where tabs are used as page navigation, these could be used as sub tabs of that page.</p> </li> <li> <p><strong>View switcher:</strong> in the case of a page in which the same piece of content is shown in more than one format, this component can be used as a switcher between the different views. For example, in docs it can be used to switch between CLI and UI (as in MAAS RAD docs) or to switch between a processed view and its source code (as in the charm libraries).</p> </li> </ul> <h3>Other considerations:</h3> <ul> <li>Ideally segmented controls should be kept to the minimum amount possible of sections to improve usability.</li> <li>Don’t mix and match icons and no icons so that the interface is not confusing to users.</li> <li>Try to size the content on each tab similarly, so that users don’t encounter pages that are significantly different in each section of the controller.</li> </ul> <h3>Size and use of icons</h3> <ul> <li> <p>By default the regular size should be used, similarly to how we use the <a href="https://vanillaframework.io/docs/patterns/buttons">button</a> component. If there is already a field or a button horizontally aligned, regular size should be used to match the same height.</p> </li> <li> <p>If there is a concern for vertical space the dense button can be used.</p> </li> <li> <p>The use of icons is to be determined by the UX and visual designers of each project where they are necessary.</p> </li> </ul> <h3>Mobile</h3> <ul> <li>It is recommended to keep the number of segments for the button low to avoid the button overflowing on smaller screens and reduce cognitive load.</li> <li>In the case the items overflow the viewport, this component can be replaced by a dropdown.</li> <li>Avoid using the small size on mobile devices where the target area wouldn’t be accessible.</li> </ul> <h2>Behaviour</h2> <h4>Inactive state</h4> <p>By default this component will always have one selected item (similar to tabs).</p> <p><img src="https://lh3.googleusercontent.com/L6ItDCo0gk9dpUAGnl0WbXYb8MQ8njbNYTLYnUoYm1l3vO40D4AOHzUMFE65VUpFj_Mpza69QD2hZnxmAeJZrZwQ3-x6TeD5hDc1hV4WLMILYv-BzR8PsDxQBaN7twvCkJc1xIIL" alt="" width="263" height="53"></p> <h4>Hover</h4> <p>On hover the background of the button will change to a light gray (current JAAS implementation).</p> <p><img src="https://lh6.googleusercontent.com/E8uFAl6k6fXj49MFDpICi8AeFA8hPTySihFQLb2wnlSk4kTFmwywicelRZ4y4Lp3ZGCy1cByreF0PUjs25tgdl_TbQ2B81fHjVG9NnOSp37uEGL67pjkXS5VXGrRGaSTMKUd6oj1" alt="" width="263" height="53"></p> <h4>On click</h4> <p>The segment that was previously selected will be unselected and the one clicked will now appear selected. By default this component acts as a mutually exclusive button.</p> <p><img src="https://lh3.googleusercontent.com/Rx_0-ONcGYP5NimUgS0gd4wkmLU19Blyxo3NOEFef4zgcxikbRcSb6r1KOf_k7VpQf-mOzmPN5tGrzevaPNfpTFxD8wEKTDf5ARkjL0tmgsywZXj5HhyiyBj5_k6xpxDOwk-i-5o" alt="" width="264" height="53"></p> <h2>Examples of this component in use</h2> <h3>JAAS</h3> <p><img src="https://lh6.googleusercontent.com/4oyYG4QophTZRhZwGyakYXZk3TA6acgA7BeSH-8oe2t94-ungX4WkAoN4pg8gZxQ17kGvEC88kGnUUF5G_j5EG3ip97gr1iqVJlY6T6pdY3LD14cdFrgdJw2ovOitqL0MCYsfQuz" alt="" width="624" height="209"></p> <p>In JAAS the segmented button is used as a view switcher that will change the grouping of the models in the dashboard. The content remains the same, only the grouping is affected in this case.</p> <h3>Charmhub</h3> <p><img src="https://lh5.googleusercontent.com/HjaKzA3NABH69EH2HK19S4qE07IAg6VxoCuGbXE8rKYGSl-H9SHTNzA9xyoPwsPsYhVdz726CqxTzUi9jknF_YRbhHUsY35c7F5HEGMiVLYsMi6yxIq-GljzNEmnG5HGTxIkthMV" alt="" width="624" height="349"></p> <p>On Charmhub the component has been used as well as a view switcher to change between the source code of the charm libraries, and the rendered docstrings in a processed way. In this case they also act as secondary tabs, since this content is already included within a set of regular tabs.</p> <h3>MAAS</h3> <p><img src="https://lh5.googleusercontent.com/dIVfWl2RP6dOJHMpqOkI-_Z06vyKmfVtU5iRppILE3fRPMiDwetAZgEGw6KJdkpGE3kdfuOQBpn87M6a6Ti-nOLHRxku-r8eRo_DVO3TK5ovn8oI9mi4N4qg5rOLttEErhiY-XVd" alt="" width="624" height="255"></p> <p>MAAS has included segmented buttons in their new designs for docs. In this case they act as a view switcher between docs for the UI or the CLI.</p> <h2>Questions to ask yourself before using this</h2> <ul> <li>Can I use the tabs instead? <ul> <li>Do I need a view switcher?</li> <li>Do I already have tabs on this page?</li> </ul> </li> <li>Is there a concern for vertical space? <ul> <li>If yes, use the smaller sizes</li> </ul> </li> <li>Can I add an icon to all the segments? <ul> <li>If not, don’t use any icons.</li> </ul> </li> <li>Are there too many segments in this button? (try to keep it under 5, optimally 2 or 3) <ul> <li>Does it fit in the viewport on smaller screens? If not, replace it with a dropdown.</li> </ul> </li> <li>Is the target area big enough for touch screens? If not, use a larger size button.</li> </ul> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> <div class='crawler-linkback-list' itemscope itemtype='http://schema.org/ItemList'> <div itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <a itemprop='url' href="https://discourse.ubuntu.com/t/design-system-website-config/27037">Design system website (config)</a> <meta itemprop='position' content='6'> </div> </div> </div> <div id='post_2' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.ubuntu.com/u/fito'><span itemprop='name'>fito</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2022-03-13T08:44:45Z' class='post-time'> March 13, 2022, 8:44am </time> <meta itemprop='dateModified' content='2022-03-13T08:44:45Z'> <span itemprop='position'>2</span> </span> </div> <div class='post' itemprop='text'> <p>How feasible it is for big spacing be applied only when a touch screen is detected (e.g. via a CSS media query)? Dense spacing looks much better to me.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> </div> <div id='post_3' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.ubuntu.com/u/danielmutis'><span itemprop='name'>danielmutis</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2022-04-19T16:27:28Z' class='post-time'> April 19, 2022, 4:27pm </time> <meta itemprop='dateModified' content='2022-04-19T16:27:28Z'> <span itemprop='position'>3</span> </span> </div> <div class='post' itemprop='text'> <p>I am not sure this is the right approach to sizing for this type of component. The designer working on a particular project should be able to judge what the appropriate size of the component is for the use case. This may sometimes be determined by other components that are aligned to it, or concerns about spacing.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> </div> </div> <footer class="container wrap"> <nav class='crawler-nav'> <ul> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/' itemprop="url">Home </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/categories' itemprop="url">Categories </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/guidelines' itemprop="url">Guidelines </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='https://www.ubuntu.com/legal' itemprop="url">Terms of Service </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='https://www.ubuntu.com/legal/terms-and-policies/privacy-policy' itemprop="url">Privacy Policy </a> </span> </li> </ul> </nav> <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p> </footer> <div class="buorg"><div>Unfortunately, <a href="https://www.discourse.org/faq/#browser">your browser is unsupported</a>. Please <a href="https://browsehappy.com">switch to a supported browser</a> to view rich content, log in and reply.</div></div> </body> </html>