Components

All 100 components of Pantrix UI by group, each with live examples, its API and its styles on every platform.

Elements

• Button: The primary action trigger: six variants, five sizes, a loading state and form submission.
• Icon Button: A button that is only an icon, in the button's variants and sizes; its content description names the action for a screen reader.
• Button Group: A few actions of the same rank as one control: attached, with one shape and one edge, or set apart, in a row or a column.
• Link: A link on its own, outside a sentence: underlined text in the primary colour that runs an action or opens a web page, announced as a link.
• Text: Text in one of the theme's type roles, which a screen reader hears as prose, a heading, a label or not at all.
• Auto Text: Text that shrinks to fit the width, the height and the lines it is given and grows back as it is shortened, on one line or several, down to a smallest size.
• Icon: An icon in one colour, the content colour of where it sits unless tinted, with an explicit decision about what a screen reader hears.
• Image: A picture in its own colours, such as a photo, an illustration or a logo; decorative unless it is given a content description.
• Avatar: The picture of a person or a thing: a photograph the app loads, over the initials of a name or an icon that stand in for it.
• Badge: A count or a status dot for another element, hidden from screen readers unless it is described.
• Badged Box: Puts a badge on a corner of its content, on the box around it or on the circle in it, without changing the content's size.
• Chip: A compact action, a filter that is on or off, or an item with a remove button, in each platform's own geometry.
• Divider: A line that separates content, across its container or down it; decorative, unless a horizontal one carries a label for a screen reader to read.
• Spinner: A spinning arc for work in progress, announced as a polite live region; it keeps still under reduced motion.
• Skeleton: A placeholder shaped like the content that is loading, with a shimmer that keeps still under reduced motion.
• Skeleton Text: Placeholder lines for loading prose, the last one shorter so that it reads as text.
• Checkbox: A two-state checkbox with a label, supporting text and an error state, controlled or bound to a form's field.
• Tri-state Checkbox: A checkbox that can also be indeterminate, for a select-all over rows that are partly selected.
• Radio Button: One option of a choice of one, with a label, supporting text and an error state; PantrixRadioGroup lays several out and moves the selection with the arrow keys.
• Radio Group: A choice of one among a few options, one under another or side by side, controlled or bound to a form's field; the arrow keys move the selection.
• Switch Button: An on/off setting that takes effect at once, with a label, supporting text and a thumb that can be dragged, controlled or bound to a form's field.
• Segment Button: A small set of choices side by side in one control, one of them chosen: a radio group drawn as one control, with a pill that slides to the choice.
• File Drop: A zone that opens the platform's file picker when pressed and takes the files dropped on it, screened by kind, size and number.
• File Item: A row for a file the app took: its name, its size or error, how far it is sent, and a button that removes it.

Inputs

• Text Field: A text input on a TextFieldState, of one line or several, with a label, a placeholder, supporting and error text, icons, a clear button, a character count and form binding.
• Filled Text Field: A text input whose label is inside a filled box and moves up when the field has the focus or a text, of one line or several, with supporting and error text, icons, a clear button, a character count and form binding.
• Secure Text Field: A text input for a password or a PIN: one line drawn as dots that cannot be cut or copied, with a button that shows it and hides it again, a label, supporting and error text, icons, a character count and form binding.
• Filled Secure Text Field: A text input for a password or a PIN whose label is inside a filled box: one line drawn as dots that cannot be cut or copied, with a button that shows it and hides it again, supporting and error text, icons, a character count and form binding.
• Auto-resize Text Field: A text input whose text shrinks to fit its box and grows back as it is shortened, on one line or several, for an amount, a number or a note that is read whole, with a label, supporting and error text, icons, a clear button, a character count and form binding.
• Filled Auto-resize Text Field: A text input whose label is inside a filled box and whose text shrinks to fit the box and grows back as it is shortened, on one line or several, for an amount, a number or a note that is read whole, with supporting and error text, icons, a clear button, a character count and form binding.
• Text Area: A text input of several lines on a TextFieldState that grows with its text and then scrolls, with a handle that resizes it, a soft or hard character limit with its count, a submit on Ctrl or Cmd and Enter, a label, supporting and error text, icons, a clear button and form binding.
• Filled Text Area: A filled text input of several lines on a TextFieldState, with a floating label inside the box, that grows with its text and then scrolls, with a handle that resizes it, a soft or hard character limit with its count, a submit on Ctrl or Cmd and Enter, supporting and error text, icons, a clear button and form binding.

Date and time

• Date Picker: A calendar to choose a day or a stretch of days from, a month at a time, with the days that cannot be chosen drawn faint and a grid of years to turn it far.
• Date Text Field: A text field for a day, typed in digits in the locale's order or chosen from a calendar its button opens, with its own errors for a day it does not take.
• Date Filled Text Field: A filled text field for a day, typed in digits in the locale's order or chosen from a calendar its button opens, with its own errors for a day it does not take.
• Time Picker: A time of day to choose from scrolling columns of hours and minutes, and of the half of the day by a clock of twelve hours, with the times that cannot be chosen drawn faint.
• Time Text Field: A text field for a time of day, typed in digits or chosen from a time picker its button opens, with its own errors for a time it does not take.
• Time Filled Text Field: A filled text field for a time of day, typed in digits or chosen from a time picker its button opens, with its own errors for a time it does not take.
• Elastic Date Picker: A range of time that can move with the clock, chosen from a quick menu or end by end, as a moment, an amount of time from now or now, in a popover, a sheet or a dialog, with a button that refreshes it or takes an edit.

Containers

• Card: A container for one subject, with header, media and footer slots; one button when it has an onClick.
• Card Skeleton: A card whose content has not arrived: the card's own surface with bars in place of its header, body and actions, announced once.
• Surface: A themed background that gives everything inside it the content colour that reads on it.
• Scaffold: The layout of a screen: bars around the content, navigation that can move with the width, and the app's snackbars over the content.
• Page Scaffold: A screen inside the app's shell: its title and actions at the top, a header, and its content kept clear of the bars and the keyboard, as wide as reads well.
• Showcase Scaffold: A screen outside the app's shell, sign in or sign up: a showcase on one side and the form on the other, only the form in a narrow room.
• Accordion: Sections whose content folds away under their headers: three ways of telling them apart, one or many open at a time.
• Tabs: A row of tabs that switches between views of the same content, one selected; the arrow keys move the selection.
• Back Button: The button that goes back to the screen before, for a top bar's navigation icon: the platform's arrow or chevron, named "Back" in the theme's language.
• Top Bar: The bar at the top of a screen: its title, with a navigation icon before it and actions after it; the title at the start or in the middle, as the platform has it.
• Alert: A message about what the user is doing, beside the thing it is about: six tones, three ways of drawing it, an action and a close button.
• Two Pane: Two panes beside or above each other, meeting at the window's fold where one divides the room.
• List Detail Scaffold: A list and the detail of its open item: side by side where there is room, one at a time where not.
• Supporting Pane Scaffold: Main content and a pane that supports it: side by side where there is room, over it where not.
• Tabletop Layout: Content and its controls: halves at a fold laid on a table, the controls below or over it flat.

Navigation

• Breadcrumb: The trail of pages above the one on screen, each a link back to it, ending in the page on screen; a trail too long for its row folds its middle into a menu.
• Navigation Bar: The app's top-level destinations along the bottom of the screen, one of them marked as where the app is: by a pill behind its icon, or by its colour alone where the style says so.
• Navigation Rail: The app's top-level destinations down the start edge of a wide window, one of them marked as where the app is, under an optional header: a navigation bar's destinations, stood on their side.
• Sidebar: The column of destinations down the side of an app: groups, sections two levels deep that open in place, a rail of icons it collapses to, by itself where the page is narrow, and what the rail opens.

Overlays

• Select: One choice out of a list the control opens under itself, in a text field's own box; the list can be searched, options can have icons and can be disabled one by one, and it binds to a form's field.
• Multi Select: Several choices out of a list the control opens under itself, each option a check box, in a text field's own box; the list can be searched, options can have icons and can be disabled one by one, and it binds to a form's field.
• Dialog: A modal decision or message over the app: a title, a message or content, and actions; focus stays inside until it closes.
• Modal: A modal layer of the app's own over a scrim, in the middle of the window or near its top: back, Escape and the scrim dismiss it, the focus stays inside it, and it keeps to one half of a fold.
• Sheet: A panel for a short task over the app: along the bottom edge, where a drag moves it, or along the end edge as a side sheet; modal until it closes.
• Menu: A list of actions for one element, in a panel beside it; the arrows walk its rows, a row that is chosen asks it to close, and so do a press outside, Escape and back.
• Popover: A layer beside an element with more about it, closed by a press outside, Escape or back; anchored to the element rather than modal.
• Tooltip: A short label naming the control it is anchored to, shown while a pointer rests on the control, while it has the keyboard's focus, and from a long press on it until the next press.
• Snackbar: A short message about what the app has just done, with at most one action; one at a time, it leaves on its own and never takes focus.
• Command Palette: Every command of the app in a modal panel at the top of the window, found by name as it is typed and run from the keyboard, with their groups and their shortcuts.
• Diagnostics Inspector: What a theme's diagnostics have found, shown over the app: a button with their number, a list of them, and an outline around the node of the one chosen.

Data

• Carousel: Slides one beside another, turned by a swipe, by two buttons or by the arrow keys, round and round and by themselves where that is asked for, with dots that say where the carousel is.
• Code Block: Code set out to be read: coloured by the tokens its caller gives, with line numbers that stay while it scrolls sideways, marks on its lines, a header and a button that copies.
• Data Table: Rows of records in columns: sorting, selection, rows that open, pinned and resizable columns, sideways scrolling, loading and empty states, and a list of records on a narrow screen.
• JSON View: A JSON text set out to be read: a value to a line, coloured by its kind, with objects and arrays that fold, a search, line numbers and a button that copies.
• List Item: A row of a list: a title with an overline, a supporting text and a trailing text, what leads and ends it, a chevron, a press, a selected state and a line under it, at each platform's list heights.
• Page Jump: Goes to a page of a long list by its number, typed into a short field beside the words that name it: a pagination's companion in a table's foot.
• Page Size: Chooses how many rows a page of a list shows, from a select of sizes beside the words that name it: a pagination's companion in a table's foot.
• Pagination: Moves between the pages of a long list: previous, the pages by their numbers with the far ones folded into gaps, and next; fewer numbers, and then previous, "Page 3 of 10" and next, where the row is too narrow.
• Tree View: A hierarchy whose branches open and close: rows chosen one at a time or by checkboxes, branches loaded when they open, a filter that keeps what holds it.
• Tag: A short label on a piece of data, a status, a category or a version, in a role's colour: read, never pressed.

Charts

• Chart: Values along a run of places as lines, filled areas and bars, side by side or stacked, with axes, a second axis of values, lines and bands to read the series by, values written at their marks, a legend that takes series out and brings them back, a tooltip for the place pointed at, and every place reachable by keys and by a screen reader.
• Line Chart: A line for each value read from one list of rows, along the places the rows name: the short way to a chart whose series are all lines.
• Area Chart: A filled line for each value read from one list of rows, for amounts that are read by their height: the short way to a chart whose series are all areas.
• Range Chart: What lies between two values at each place, as a band between two lines or as a bar from the one to the other: the least and the most of a day, the bounds of a forecast. The short way to a chart of one range.
• Bar Chart: A bar for each value read from one list of rows, side by side or stacked, for amounts that are compared place by place: the short way to a chart whose series are all bars.
• Waterfall Chart: How an amount comes about, step by step: each bar starts where the one before it ended, up for what is added and down for what is taken away, with totals that stand on nought. The short way to a chart of one waterfall.
• Candlestick Chart: What something opened at, closed at, and the highest and the lowest it reached between, at each place: a body with a wick, in the colour of the way it closed, or an OHLC bar. The short way to a chart of one series of candles.
• Pie Chart: The parts of a whole as the slices of a pie, or of a ring with a total in its middle, with a legend that takes slices out and brings them back, a tooltip for the slice pointed at, and every slice reachable by keys and by a screen reader.
• Gauge: One reading on a scale, as an arc filled up to it or a needle that points at it, with ranges of the scale in colours of their own and the reading said to a screen reader with the range it is in.
• Progress Circle: A ring that fills clockwise as a known amount of work gets done, with room in its middle for the share or an icon, read by a screen reader as a progress bar.
• Meter Group: Several amounts of one whole, side by side on one bar, with a legend that writes each amount beside its colour.
• Status Tracker: A run of steps as a row of coloured blocks, with the name of the block that is pointed at written under it, reachable by keys and by a screen reader.
• Sparkline: The run of a number in the room of a word, as a line, an area or bars, with no axes and nothing to point at.
• Scatter Chart: Points set out by two values, and bubbles sized by a third, with two axes of values, lines and bands to read them by, a legend that takes series out and brings them back, a tooltip for the point pointed at, and every point reachable by keys and by a screen reader.
• Radar Chart: Several measures of one thing on spokes about a middle, joined into a web, with a web for each series, a legend that takes series out and brings them back, a tooltip for the spoke pointed at, and every spoke reachable by keys and by a screen reader.
• Polar Chart: Bars set out round a middle, each as long from the middle out as its value, side by side or stacked, with a legend that takes series out and brings them back, a tooltip for the sector pointed at, and every sector reachable by keys and by a screen reader.
• Heatmap: A grid of cells shaded by their values, with the names of its columns and rows, a scale of shades, a tooltip for the cell pointed at, and every cell reachable by keys and by a screen reader.
• Treemap: A box cut into tiles, each as large as its value is of the whole, in groups with their names over them, with a tooltip for the tile pointed at and every tile reachable by keys and by a screen reader.
• Funnel Chart: The stages of something that fewer and fewer get through, one under another, each as wide as the number that reached it, with its share of the first, a tooltip for the stage pointed at and every stage reachable by keys and by a screen reader.
• Sankey Chart: What flows from where to where: nodes in columns and between them bands as wide as what flows, set out from the links alone, with a tooltip for the node pointed at and every node reachable by keys and by a screen reader.
• Gantt Chart: The tasks of a plan, a row each, every one a bar from the moment it starts to the moment it ends along one axis of time, with how much of it is done, milestones, a line at today, a tooltip for the task pointed at and every task reachable by keys and by a screen reader.