All components

Every component, in the group of the job it does, with what each one is for.

This page lists every buttery component in the group the sidebar gives it, with the line its own page starts with. Use it to find the component for a job: each name opens its page, with a live demo, examples and props.

The building blocks have sections of their own:

Stack, Inline, Grid and Surface are in Layout.
Text and Icon are in Foundations.
The motion presets are in Motion.
Page-sized parts, such as AppShell, are in Patterns.

Actions

Component	What it's for
ArrowLink	A text link with the navigation arrow, for See all, Learn more and moving through content.
Button	A button for actions: four variants, three sizes, a loading state, icons and a navigation arrow.
Chip	A small reset action that sits next to a control, such as Reset beside a slider's label.
FloatingToolbar	A floating pill of actions anchored under an element, such as crop mode's size, Reset, Cancel and Apply.
IconButton	A square button that shows only an icon, named by a label that also appears as its tooltip.
InfoButton	An info button that explains a value: on hover and focus in a tooltip, and on a press or a tap in a popover that stays.
Pressable	An unstyled button with buttery's press feedback and focus ring.
QuickActions	A row of small soft buttons for the things people do most on a page, folding into a menu when they don't fit.
SplitButton	A primary action with a menu of related ones beside it: two halves of one pill, each its own button.

Inputs

Component	What it's for
ColorPicker	A color area, a hue track and a hex code for picking any color, with optional presets.
Control	The root of a fixed-height control you build yourself: a token height, matching padding and data-bt-control.
DateRangeBar	The period a report covers: a range with presets or two dates, the interval its charts group by, and what it's compared with.
DropZone	An area that takes files dropped on it, pasted or opened with a shortcut, and says so while a file is held over it.
Field	A label, an optional hint and an error message wired to any form control by id.
NumberField	A small field for an exact number, with arrow-key steps, a stepper on hover and scrubbing by dragging its label.
PasswordField	A labelled password box with a button that shows or hides what's typed, and optional requirements.
SearchField	A field for finding things: a search icon, a clear button once it holds text, and an optional shortcut that focuses it.
Slider	A labeled slider row: the label and its value badge beside a track you drag, click or step with the keyboard.
TextArea	A labelled box for longer text that grows with what's typed up to a limit, then scrolls.
TextField	A labelled box for a line of text, with a hint, an error and optional icons.
TiltPad	A small pad for tilting something in 3D: drag the knob or use the arrow keys.
IdentifierField	One field for an email address or a phone number, which tells them apart as they're typed and formats a phone number as it goes.
OneTimeCodeField	One input for a one-time code, drawn as a slot per digit, that takes a pasted or autofilled code whole.

Selection

Component	What it's for
AnchorGrid	A 3×3 grid of dots for picking where something sits: a corner, an edge or the center.
Checkbox	A box to tick for one yes-or-no choice, with its label beside it.
ColorDot	A small round swatch that opens buttery's color picker in a popover to choose any color.
FilterBar	A row of filter pills over a list that wrap as they're applied, with Clear filters and actions, folding into one button on a phone.
OptionTiles	Several choices at once, as tiles that take a press anywhere.
PreferencesMatrix	On and off choices in groups, against channels such as email and push.
RadioCardGroup	One choice among a few explained options, one of which can reveal its own field.
SegmentedControl	One choice out of a few, shown side by side in a track, with the selection sliding between them.
Select	A trigger that shows the chosen value and opens a list to pick another, with an optional footer for custom values.
SwatchGrid	A grid of color and gradient swatches to pick one from, like radio buttons.
Switch	A switch that turns a setting on or off at once, with its label beside it.
ViewToggle	Two icon segments that switch a collection between a grid and a list, each named by its tooltip.

Component	What it's for
AccountMenu	The workspace switcher at the top of a sidebar and its menu: the workspace, switching to another, the person signed in, and signing out.
Breadcrumbs	The trail of pages above a nested page, as links above its title.
CommandSearch	The top bar's search: grouped results from typed sources, filters and recent searches.
MorphMenu	A row of menu triggers whose menus open in one floating panel that reshapes from menu to menu instead of closing and reopening.
NavBar	The bar across the top of a page: the brand, menus that open in one morphing panel, and the calls to action, static, sticky or auto-hiding.
PageDots	A row of dots showing which step of a few is current, the current one a pill that moves on spring.snappy.
SavedViews	A track of saved views of a list, the chosen one on a sliding raised pill, with every view and its actions in a menu.
SettingsIndex	A settings home page: titled sections of links, each with an icon, a title and a line on what's inside, in up to three columns.
Sidebar	An app's navigation down the side: a workspace switcher, items, titled sections, groups that fold, and the pages visited lately.
StatTabs	Equal tabs over a list that each show a view's count, the chosen one on a sliding raised panel, a select on a phone.
SubNav	A sticky bar of links to the sections of a long page, under the nav bar, marking the section the reader is in.
TabNav	Underlined tabs that go to other pages, marking the current one, with the links that don't fit in a menu.
Tabs	Tabs that switch the panel under them, underlined, as pills or boxed on a track, with a sliding marker and the tabs that don't fit in a menu.
TopBar	The bar over a dashboard's page: search at its start, icon actions and a round create button at its end.

Overlays

Component	What it's for
AnnouncementDialog	What's new, once: a large dialog with a title, short sections and an illustration, a Got it button and a link to read more.
ChoiceDialog	A dialog that offers a few ways to go: each a row with an icon, a title, a line and an arrow, choosing one closes it.
ConsequenceDialog	A dialog that spells out what saying yes will do before anyone confirms.
ContextMenu	A menu of actions for what's under the pointer: it opens where a right-click or a long press lands, or at the focused element from the keyboard.
Dialog	A modal dialog that dims the page, traps focus and hands it back when it closes.
ExpandableCard	A bento card that opens into a dialog by turning into it, its title travelling along, and closes back into the card.
FormDialog	A dialog that asks for a value or two, Submit waiting until the form is valid.
FullscreenDialog	A dialog that takes the whole window for one big question and its answer.
Menu	A list of actions that opens from a trigger, on the floating surface in the dropdown layer.
NotificationNudge	A small popover that points at a button with news, once: a title, a line, an action and Later, opening by itself without taking focus.
Popover	A floating panel anchored to a trigger, on the floating surface in the dropdown layer.
Sheet	A panel that slides in from an edge of the window over a dimmed page: a side panel on a laptop and a drawer on a phone.
SidePanel	A panel beside the page, such as help, that narrows the page instead of covering it.
Tooltip	A short label that appears beside an element after the pointer rests on it, or when it takes keyboard focus.

Data display

Component	What it's for
Accordion	A list of items that each open in place: a trigger row over a panel whose height follows its content.
AreaChart	Values over time as lines with their area filled in faintly, for totals that build up, with a crosshair and tooltip.
Avatar	A person's round picture, or their initials when there's none or it fails to load.
BarChart	Values per period or category as bars, side by side for each series, with a column that highlights on hover.
Catalog	Parts for any catalog: a root that searches, filters, sorts and pages its items, a toolbar, and cards in a grid, a list or rows.
ChartFrame	The frame buttery's charts are drawn in: gridlines and axis labels, a crosshair or column with a tooltip, keyboard steps, a screen-reader table, and no-data and loading states.
ColumnSettings	A button that opens a list of a table's columns to show, hide and reorder by dragging or with Alt and the arrow keys.
DataTable	A table of records: columns with minimum widths and shares, selection, sorting, row actions, a sticky header and first column, skeleton rows and pagination.
GroupedList	Things grouped in one well: card rows with media, a title, a line and a value, under optional titles with a … menu, and a dashed row that adds one more.
HoverActions	A row whose actions show on hover and keyboard focus, with an accent bar.
InitialsTile	A square tile with up to two initials, standing in for a workspace or team that has no picture.
Kbd	Keycaps for a keyboard shortcut, with mod shown as Command on Apple platforms and Ctrl elsewhere.
LineChart	Values over time as smooth lines, the comparison in gray beneath, with a crosshair and tooltip that follow the pointer.
MetricCard	One metric on a card: its title, value and change against the previous period, a small chart of both periods, and when it was updated.
ScopeBadge	A badge after a settings page's title that says what its settings apply to.
Sparkline	A trend at a glance: one small line, no axes, its last point marked, for a table row or beside a number.
TagChip	A small tag with a colored dot, outlined by default or soft or solid in its tone.
ValueBadge	A small badge that shows a formatted value and keeps room for its longest value, so it never changes width.

Feedback and status

Component	What it's for
Banner	A one-line suggestion across a page: an icon, the message, an action and how long it takes, dismissed for good once closed.
Callout	A tinted box for a message in place: information, success, a warning or an error.
Confetti	A short burst of confetti from an element, for a genuine finish such as completing onboarding.
EmptyState	What shows where content will be: a title, a line about how to add some, and the actions that do.
FeatureIntro	Introduces a feature on its empty page: a title, a line, two or three benefits, a primary action and docs beside an image.
LoadingPill	A small pill with a spinner that says something is loading, shown only once loading has lasted 300ms.
RecommendationCard	A tip on a card: what to try, why, a link to do it and how long it takes, with optional media, dismissed for good once closed.
SetupGuide	A floating checklist in the bottom-end lane: progress, the next task, and every task when unfolded, remembered across visits.
Skeleton	A shimmering placeholder for something still loading, shaped like the text or block it stands in for.
StatusBadge	A short label for a record's state, such as Paid or Overdue, in a tone that repeats what it says.
Toaster	Shows short messages from toast() at the bottom of the window, three at most, each leaving on its own after a few seconds; ButteryProvider mounts one, so an app only calls toast().

Make anything buttery
The four ways to bring buttery into an app, from wiring up the provider to whole-page patterns.
App shell
The frame of a whole app, as an editor or a dashboard, and the page that goes in it.