StartFoundationsComponentsContent
Overview
Button Icon button Split button Button group Toggle button Toggle button group
Badge Banner Empty state Progress bar Progress ring Section message Skeleton Spinner Toast
Field Input Textarea Number input Number stepper Search field OTP input Phone input Checkbox Radio group Switch Slider Selection card Inline edit
Select family Select Combobox Multiselect Country select Date picker Date range picker Time picker Calendar Emoji picker
Dialog Sheet Popover Menu Tooltip
Sidebar Navigation menu Tab bar Segmented control Breadcrumb Pagination Tree
Table Data table Avatar Avatar group Tag Icon Image
Text Prose Link Code block Kbd
Accordion Collapsible Divider Scroll area Splitter Aspect ratio
Page header

Components

Every component in Thykes, grouped by what it does. Each one is a web component that works on any page, with or without a framework.

Actions

Things a person presses to make something happen.

  • Save changes

    Button

    A button runs one action or submits a form.

  • Icon button

    An icon button runs one action and shows a single icon instead of a text label.

  • PublishSchedule

    Split button

    A split button joins a default action to a caret that opens a menu of alternatives.

  • CutCopyPaste

    Button group

    A button group joins related buttons into one block, or spaces them evenly.

  • Pin to top

    Toggle button

    A toggle button is a button that stays on or off.

  • BoldItalicUnderline

    Toggle button group

    A toggle button group joins several toggle buttons into one toolbar, where any number can be on at once.

Feedback

How the interface reports status, progress and messages.

  • DraftStable

    Badge

    A badge shows a status or a count at a glance.

  • Maintenance tonight at 22:00 UTC.

    Banner

    A banner is a full-width strip at the top of the app for a message about the whole app or account.

  • No itemsAdd one to get started.Add

    Empty state

    An empty state fills a region that loaded with nothing to show.

  • Progress bar

    A progress bar shows how far a task has gone on a known scale.

  • Progress ring

    A progress ring shows how far a task has gone on a known scale, as an arc.

  • Your changes are saved automatically.

    Section message

    A section message tells the user something about one part of the page.

  • Skeleton

    A skeleton is a gray shape that stands in for content while it loads.

  • Spinner

    A spinner shows that something is loading.

  • Toast

    A toast is a short message that confirms an action, floats at the bottom of the screen, and goes away on its own.

Forms

Fields and controls that collect what a person enters.

  • Field

    A field gives one form control a visible label, help text, and an error message, and names the control for screen readers.

  • Input

    An input takes one line of text, such as a name, an email, or a URL.

  • Textarea

    A textarea takes text over several lines, such as a description, a message, or feedback.

  • Number input

    A number input takes a number people type, such as an amount, a price, a rate, or a measurement.

  • Number stepper

    A number stepper sets a small whole number with − and + buttons, such as a quantity, guests, or tickets.

  • Search field

    A search field takes a search query.

  • OTP input

    An OTP input takes a short one-time code, such as an SMS or email verification code, a two-factor code, or a PIN.

  • Phone input

    A phone input takes an international phone number.

  • Product updatesEvents

    Checkbox

    A checkbox turns one option on or off in a form.

  • EmailPhone

    Radio group

    A radio group asks for exactly one answer from a short list.

  • Auto-save

    Switch

    A switch turns one setting on or off, and the change applies at once.

  • Slider

    A slider sets an approximate number, or a range, by dragging a handle along a scale.

  • Pro$29/mo

    Selection card

    A selection card is a larger option with room for a description, an icon, or a price.

  • Inline edit

    Inline edit shows a value as plain text and turns it into a field when clicked.

Selection

Picking values from a list, a calendar or a set.

  • Select family

    Four fields for choosing from a list.

  • Select

    A select lets people choose one option from a short, closed list.

  • Combobox

    A combobox lets people choose one option from a long list by typing to filter it.

  • Multiselect

    A multiselect lets people choose several options from a list.

  • Country select

    A country select lets people choose one country by typing to filter.

  • Date picker

    A date picker is a form field for one date.

  • Date range picker

    A date range picker is a form field for a period, such as a stay or a report window.

  • Time picker

    A time picker is a form field for a time of day.

  • Calendar

    A calendar is a month grid that stays on the page.

  • Emoji picker

    An emoji picker is a panel for finding and inserting an emoji.

Overlays

Surfaces that open above the page.

  • Rename projectThe new name shows everywhere.
    CancelRename

    Dialog

    A dialog is a modal window over the page.

  • FiltersUnreadStarred

    Sheet

    A sheet is a modal panel that slides in from an edge of the screen.

  • Filters
    OpenClosed

    Popover

    A popover is a small panel that opens next to a button and can hold buttons, links, and fields.

  • RenameDuplicateDelete

    Menu

    A menu is a list of actions that opens from a button.

  • Copy link

    Tooltip

    A tooltip is a short text bubble that shows when people hover over or focus a control.

Navigation

Moving between pages, sections and views.

  • OverviewProjectsSettings

    Sidebar

    A sidebar is a column of navigation links at the side of an app or docs site.

  • PricingDocs

    Navigation menu

    A navigation menu is a site's or app's main navigation.

  • ProfileAlertsBilling

    Tab bar

    A tab bar switches between sections of content in place, one section at a time.

  • ListGrid

    Segmented control

    A segmented control switches between views of the same content, such as List and Grid.

  • HomeDocsBreadcrumb

    Breadcrumb

    A breadcrumb shows where the current page sits in a deep hierarchy, as a trail of links back up to the top.

  • 123

    Pagination

    Pagination splits a long list into numbered pages and moves between them.

  • Tree

    A tree shows nested items, such as files and folders, in rows that open and close to any depth.

Data display

Showing records, people and labels.

  • RegionQ1
    North1,204
    South987

    Table

    Table styles a real <table> you write and makes it scrollable by keyboard when it is too wide.

  • Data table

    Data table renders a table from your rows and column definitions, with sorting, column resizing, row selection, expandable rows, and pagination.

  • Avatar

    An avatar shows who or what something belongs to.

  • Avatar group

    An avatar group shows a few overlapping avatars and a "+N" button that lists the rest.

  • ResearchHiking

    Tag

    A tag labels something with a category.

  • Icon

    An icon draws one glyph from the Thykes icon font, sized from the icon scale and colored like the text around it.

  • Image

    Image shows a picture with a loading placeholder, an error fallback, and lazy loading, and keeps its alt right in every state.

Text

Type roles, links, code and keys.

  • Billing historyRenews on 27 March.

    Text

    Text renders a run of text in one of the system's type roles.

  • Body text with inline code and emphasis.

    Prose

    Prose styles a block of authored content, such as markdown or CMS output, without a class on every element.

  • Read the privacy policy

    Link

    A link takes the reader to another place.

  • <tk-button>Save</tk-button>

    Code block

    A code block shows source code for reading, with syntax colors, a copy button, and optional line numbers.

  • Kbd

    Kbd shows a keyboard shortcut as a row of keys.

Layout

Grouping, dividing and sizing regions of a page.

  • Shipping

    Arrives in 3 days.

    Returns

    Within 30 days.

    Accordion

    An accordion is a stack of sections.

  • Show details

    Arrives in 3 days.

    Collapsible

    A collapsible shows or hides one block of content when its trigger is clicked.

  • AccountBilling

    Divider

    A divider is a thin line between two groups of content.

  • Scroll area

    A scroll area is a box with a size limit whose content scrolls.

  • Splitter

    A splitter divides an area into panels that people resize by dragging the handle between them, or with the keyboard.

  • Aspect ratio

    An aspect ratio box keeps a set proportion and makes its child fill it, so media takes its space before it loads and the page doesn't jump.

Patterns

Recipes composed from the components above.

  • ProjectsAuroraAurora

    Page header

    The block at the top of a page.