Reference
Components
45 free components in 7 categories.Each page has a live preview, the component's anatomy, its states and accessibility notes.
Actions#
Buttons and controls that trigger an action.
ButtonTriggers an action: submits a form, starts a flow or confirms a choice.Link ButtonAn action styled as a link: brand-coloured text that underlines on hover.Ghost ButtonA button with no fill or border until hovered.Fancy ButtonA skeuomorphic primary button with an inner highlight and a crisp ring.Compact ButtonA small square button for a single icon, such as close, more, copy or expand.Button GroupA row of connected buttons that share one border, such as a view switcher, a pager or a set of filters.
Displaying Data#
Components that display people, status, quantities and tabular data.
AvatarsA circle that stands for a person: a photo, a cut-out, a memoji, an illustration, initials or a person glyph, with an optional online dot and verified badge.Avatar GroupA row of overlapping avatars for members, assignees or viewers.Avatar Compact GroupA denser Avatar Group: three small avatars and a +N count, held in a white pill.BadgesA small, non-interactive label for a status or count, such as Active, Beta or 3.TagA compact chip for a value that has been applied or can be selected, such as a label, filter or skill.Fancy TagA raised tag: a user-circle glyph, a label and a close cross, lifted by a soft shadow and an inner highlight.Data TableDisplays records in rows, with one column per field.Content LabelA leading visual, a label with an optional sub-label and a line of description: the row you use for settings, integrations and list items.Content DividerA thin line that separates groups of content, solid or dashed.KBDA small key cap that displays a key or keyboard shortcut, such as ⌘ K.Line Progress BarA row of twenty rounded ticks that light up from the left to show progress toward a known total, such as an upload, a battery or a quota.Circular Progress BarA ring of forty ticks that fills in brand blue from the left around the bottom, in three states, with room in the middle for a readout.RatingStars or hearts that display a score or collect one: a Rating & Review summary, Rating Cells to set a score, a five-step Rating Bar in emoji or numbers, and distribution rows.
Feedback#
Messages and hints, from tooltips and inline alerts to page-wide banners.
Alert & NotificationA short message about an event or something that needs attention, in five intents (Info/Help, Warning, Success, Error, Update).TooltipA short label, or a small card with a title and description, shown on hover or keyboard focus.BannerA full-width bar at the top of a page with one message about the whole product or account, in five statuses (Error, Warning, Success, Information, Feature) and four appearances.
Form#
Inputs, labels and validation messages.
CheckboxA 20px box that turns an option on or off, alone or in a list where any number can be picked.RadioA round control for picking exactly one option from a set.Color PickerA 366px panel for choosing a solid or gradient colour: a fill-type collection, gradient stops, a saturation and brightness spectrum, hue and opacity sliders, a Hex, RGB or CSS field and recently used swatches.Date PickerA 368px panel with one month for a single date, or a 936px range picker with two months, a preset rail and the chosen range spelled out in the footer.OTP InputA 352px row of five or six square cells for a one-time code.File UploadA 494px field for attaching files: a dashed drop zone, then a row per file that shows its progress, and a finished file row or image card once it lands.HintThe footnote under a field: an info glyph, a line of guidance or the error, and an optional note on the right.InputA 60px text field with its label above and hint below, in four types: Multi-Purpose, Search, Password and Web Link.DropdownA 60px field that opens a menu of options with an icon, a label, a line of description and an optional badge.SliderA 320px track for choosing a value, or two thumbs for choosing a span, with the label, (Optional) and the amount above it.SwitchAn on/off control that takes effect immediately.Text AreaA 120px multi-line field with the Input's label and hint, a character counter and a resize glyph.
Layout#
Components that organise a page into sections.
AccordionA header that opens to show a section of content.BreadcrumbA trail of links from the top of a hierarchy to the current page, 20px tall, with one of seven separators.Segmented ControlA 40px track of two or three segments where exactly one is chosen, under an optional field header.Tab Menu HorizontalA 48px strip of tabs between two hairlines.Tab Menu VerticalA column of 36px tabs under an OR overline, as a 258px card or a bare list.
Navigation#
Components for moving between pages and showing the current location.
Overlays#
Components that appear above the page, such as dialogs, menus and popovers.
Command MenuA 451px panel for searching and jumping anywhere: a search field, filter tags, grouped results in 48px or 64px rows, and a footer of key hints.ModalA 440px surface over a blurred 40% overlay: a Status Modal with an Error, Warning, Success or Information icon, or a header, a body and a footer assembled from the kit.PopoverA 320px card anchored to a trigger by a tail on one of twelve edge positions, with a line of guidance, a dismiss button, a step count and Back / Next.