Open DS

Components

40 components are in Dense data. Each one is here for a reason, and every reason traces back to the answers further down.

How the decisions cascade into them ↓

The inventory

Action · 2

Buttons and toggles that start or switch something.

  • ButtonEvery action.Button in Dense data
  • Toggle groupSwitches a table between views and densities.Toggle group in Dense data

Form · 14

Fields, choices and pickers that take input.

  • InputSearch and edit fields.Input in Dense data
  • Input groupSearch with an icon and a clear button.Input group in Dense data
  • SliderNarrows a filter to a range of risk scores by dragging.Slider in Dense data
  • SelectPicks one value in filters and forms.Select in Dense data
  • Radio groupPicks one of two or three options, all visible at once.Radio group in Dense data
  • ComboboxPicks an asset or a user from thousands.Combobox in Dense data
  • CheckboxSelects rows and filter values.Checkbox in Dense data
  • SwitchSettings that apply at once.Switch in Dense data
  • LabelNames every control.Label in Dense data
  • FieldLays out label, control and error the same way everywhere.Field in Dense data
  • FormKeeps validation and errors the same on every record edit.Form in Dense data
  • TextareaNotes on an alert, for the next analyst.Textarea in Dense data
  • CalendarDate ranges for reports.Calendar in Dense data
  • Date pickerPicks a date range for reports and filters from a button in the toolbar.Date picker in Dense data

Data · 3

Tables, charts and counts that show records.

  • TableThe heart of the product: rows of records.Table in Dense data
  • Data tableAnalysts scan hundreds of alerts, filter by status and asset group, sort by risk and act on many rows at once.Data table in Dense data
  • ChartTotals over time on dashboards.Chart in Dense data

Navigation · 7

Menus, tabs, breadcrumbs and bars that move between places.

  • PaginationMoves through long result sets.Pagination in Dense data
  • CommandKeyboard-first jump to any record or action.Command in Dense data
  • Dropdown menuRow actions.Dropdown menu in Dense data
  • Context menuRight-click on a row, for experts.Context menu in Dense data
  • TabsViews of one record.Tabs in Dense data
  • SidebarApp navigation that stays open all shift.Sidebar in Dense data
  • KbdShows the shortcuts experts learn.Kbd in Dense data

Feedback · 5

Alerts, toasts, loading and empty states that report what happened.

  • BadgeAlert status in rows.Badge in Dense data
  • AlertA problem that stays on the page.Alert in Dense data
  • ToastConfirms a saved change.Toast in Dense data
  • SkeletonRows while a table loads.Skeleton in Dense data
  • EmptyAn empty table says what to do next.Empty in Dense data

Overlay · 5

Dialogs, sheets, popovers and tooltips that sit above the page.

  • DialogEdit one record without leaving the table.Dialog in Dense data
  • Alert dialogConfirms a delete.Alert dialog in Dense data
  • SheetRecord details beside the table.Sheet in Dense data
  • PopoverFilters next to the column.Popover in Dense data
  • TooltipExplains an icon button.Tooltip in Dense data

Layout · 4

Cards, separators and containers that group and arrange content.

  • CardDashboard figures.Card in Dense data
  • SeparatorGroups toolbar actions.Separator in Dense data
  • Scroll areaLong tables in fixed panels.Scroll area in Dense data
  • ResizableExperts size the table and detail panes.Resizable in Dense data

How the decisions cascade into them

The reasons come first. Five answers follow from them, and each answer shapes the inventory.

  1. 1 · The reasons

    • R1Content and dataNumbers and records, a lot
    • R2Tasks and flowsScan and compare, constantly
    • R3Team and deliveryA small team, every month
    • R4Use scenariosAt a desk, all day
    • R5BrandPrecise, quiet

  2. 2 · Five answers, and what each does to the inventory

    • Which component families does it need?becauseR1R2
      • Actions, forms, feedback, overlays, layout and navigation
      • Core, plus data (chosen)
      • Core, plus content and media
      • Core, plus media

      Records need tables, filters and fast ways to move between them.

      Admits 7 families: action, form, feedback, overlay, layout, navigation, data.

    • How far does the inventory reach?becauseR1R3
      • Only what today's screens useA component joins when a screen in use needs it, not before.
      • What today's screens use, plus what the next ones will likely need (chosen)Covers the screens in use and the ones the team can see coming, so they find the parts ready.
      • Everything its families offer, ready before it's asked forEvery component the admitted families hold is there from the start, so teams never wait for one.

      A full operations tool with the parts its next screens will need, still few enough for a small team to keep right.

      What today's screens use, plus what the next ones will likely need: Dense data carries 40, as many as its needs.

    • How does a component earn its place?becauseR4R2
      • A use scenario needs it (chosen)
      • Its family is in the roles, so product teams find it ready
      • It works for everyone, with any device and assistive technology
      • It gives the brand a moment

      A component joins only when a daily task needs it.

      Every component in the list above names the need it meets.

    • When does a component get another look?becauseR5R2
      • Only when the meaning changes (chosen)A new variant only for a different meaning, such as the main action or a danger.
      • Also for emphasis and sizeVariants also set how loud a component is and how much room it takes.
      • Also so each brand or page can look its own wayVariants also let a brand or a page carry its own look on the same component.

      Repeated screens stay identical when a component changes only with its meaning.

      Only when the meaning changes variants per component: the components above keep to them.

    • Where do components do the most work?becauseR1R2
      • Tables and forms (chosen)
      • Articles
      • Forms and steps
      • Sign-up and account pages
      • Campaign sections

      Most work happens in tables and the forms that edit them.

      Most components above serve tables and forms.

  3. 3 · The inventory

    40 components, listed above, each with the reason it passed. Back to the list

Dense data carries 40 components: core, plus data, each admitted because a use scenario needs it.