Components

Built for the dense screens the tokens were measured on: a scheduling grid, a patient record, a table that stays legible at 11px. Each page says when to reach for the component and when for its neighbour.

Leonor VianaLeonor VianaConfirmed

In this section

  • Forms

    2
    Intake form

    Notes

    No notes yet

    Accordion

    Sections that open and close on the native details element, several at once or one at a time.

  • Success:
    Appointment saved

    Alert

    A tinted line that stays beside what it is about: four tones, one action, a close.

  • Leonor Viana

    Avatar and Loader

    Initials, a status dot, a group with overflow, and a spinner that keeps its tone.

  • ConfirmedAwaiting

    Badge

    Seven tones, two sizes, with an icon or a dot.

  • Breadcrumb

    The section as a capsule with its icon, a slash, and the page in words; every link a capsule under the pointer.

  • Button

    Three variants, five tones, three sizes, and a loading state that does not look disabled.

  • Phoenix Clinic
    Rochester, MN

    Card

    A filled surface and five parts: a picture, a title that makes the card a link, controls that stay pressable.

  • No notes yet

    Notes are kept here.

    Empty state

    What this is, why it is empty and what to do next, in two sizes, with a dashed frame for first use.

  • Input and Textarea

    Text fields with a label, a description and an error, sharing one Field.

  • Checkbox, Radio, Switch

    The controls whose border is the control, and the one border strong enough for them.

  • Laura Lee1 selected
    Laura Lee
    Brian Stewart

    Combobox

    Typed in to narrow a list: one value, or many as tags with a checkbox before every option.

  • Command palette

    A dialog with a field and a list of commands, ⌘K from anywhere: the site's own search, graduated.

  • Type digits only, as month, day, year. Separators are added for you.

    Date picker

    A masked field and a calendar, single date or range, that never intercepts a key.

  • Cancel this appointment?

    Dialog

    Four sizes, a form with initial focus, and no light dismiss on purpose.

  • New appointment

    Drawer

    A panel at the side, over the content or beside it, that can be resized and never closes itself.

  • RescheduleSend reminderCancel appointment

    Dropdown menu

    A command list on a popover, placed with CSS anchors, with a border only in dark.

  • or drag and drop · PDF or image.
    • Consent.pdf

    File upload

    A zone to choose or drop files, and the list of what became of them.

  • Status is Active

    Filters

    The filters on a list, read as words: a chip a field, its values a click away, a plus, and Clear.

  • Read the specification

    Link

    The accent in Medium, a line only under the pointer and the focus, and a Button that takes an href.

  • Navigation

    The top bar, the side nav that collapses to icons or opens as a drawer, and the second level under captions.

  • Page 8

    Pagination

    Seven places that never move the arrows, and a page size typed or picked inside its own sentence.

  • New appointment

    Popover

    A panel anchored to the control that opens it: a title, a few fields or a short list, its buttons at the end.

  • Uploading62%

    Progress

    A native bar painted once for every browser: a value that travels, a band when how far is not known.

  • Thursday, April 20
    All-day

      Scheduler

      The grid of hours with the appointments on it: a week of days or a day of people, the now line, each event a card.

    • Consultation
      Follow-up

      Select

      A button in Input’s box that opens the system’s own list: an Avatar, a code in bold, a check on the choice.

    • Skeleton

      Three shapes put where the content will be, with a sweep that reduced motion slows to a breath.

    • Two clients
      ClientVisits
      Lisa Roberts14
      Gary Martin3

      Table

      Sorting and selection, two densities, and columns that give way.

    • Period

      Segmented control

      The segmented track over a value: a radio group, where the Tabs are views.

    • Slider

      A value along a line, or a range between two thumbs, with a field to type it.

    • Tabs

      Underline, segmented and pill over one keyboard pattern, with a thumb that slides.

    • Laura LeePediatrics

      Tag

      A capsule for something the reader added and can take away: a person, a filter, a label.

    • Appointment savedUndo

      Toast

      A line on the inverse surface, in a corner: what happened, one way to take it back, and a close.

    • Copy linkSearch ⌘K

      Tooltip

      The overlay card and a compact size, opened by hover and by focus, and out of the way on Esc.