Button
<gok-button>the primary action — neutral, one per view. Forest
brand for the single hero call.two primaries in one context, or colour to add emphasis — demote the second to outline/ghost.
design system · v2 · components
The parts, and how to use them
33 families on the same six-file anatomy — Lit web components that read only tokens, so they inherit the neutral-led brand and theme by one attribute. Each below shows its variants and a quick use / don't.
Get started
Install
Not yet published — for now, consume from the workspace. Once published the shape is one import for the foundations, then per-element registrations.
import '@gokberknur/design-system/tokens.css';
import '@gokberknur/design-system/gok-button';
<gok-button variant="brand">Get started</gok-button>Actions
The things people click. One primary action per context — neutral; forest is the one rationed brand button.
Link
<gok-link>Read the
inline navigation — forest is the link stamp, underlined by default.
style a button as a link (or vice versa) when the action isn't navigation.
Tag
<gok-tag>a keyword, filter, or category chip — pill shape, subtle brand wash.
use it for status (that's a badge) or as a button.
Forms
Inputs and choices. Selection states stay neutral; the focus ring is the forest stamp.
Input
<gok-input>a single line of text; pair a
label + helper; show errors with a word, not just colour.rely on placeholder as the label, or colour the field red with no message.
Checkbox
<gok-checkbox>independent on/off choices; the check is neutral under the neutral-led model.
use for one-of-many (that's radio) or an instant setting (that's a switch).
Radio group
<gok-radio-group>one choice from a short, visible set; always inside a labelled group.
use for many options (use select) or a single toggle (use checkbox/switch).
Switch
<gok-switch>a setting that takes effect immediately; the thumb position carries state beyond colour.
use where a Save step applies the change — that's a checkbox.
Select
<gok-select>one choice from a longer list; the selected tick is the forest stamp.
use for 2–4 visible options (segmented/radio read faster).
Segmented
<gok-segmented>a compact one-of-many for a view or mode (2–4 items).
overflow it with many segments — switch to a select.
Theme switch
<gok-theme-switch>let people flip light/dark; it persists and re-resolves every token.
build a second theme mechanism — one attribute switch drives the whole system.
Data display
Showing content. One frame per surface; the featured mark is a single warm beat, never a fill.
Card
<gok-card>Orchard rebrand
A neutral-led identity for a regional cider maker — one earned green, set in Geist.
Shorter card
Footers pin to the bottom, so actions align across a card-grid row even when bodies differ.
frame a content set; flat (hairline + radius), laid out on the auto grid; footers align across a row.
nest a card in a card, add a drop shadow, or fill a card with colour for emphasis.
Badge
<gok-badge>status shrunk to a label — a 2px rule + word;
info = turquoise, featured = sunset.rely on colour alone, or use a badge as a clickable control.
Divider
<gok-divider>Above the rule.
Below the rule.
separate content where space alone isn't enough; a single hairline.
scatter dividers where whitespace would do the separating.
Icon
<gok-icon>a line glyph; give it a
label when it stands alone, none when paired with text.use icons as the only signal for meaning or status.
Accordion
<gok-accordion>Invoices are issued on the first of each month and charged to your default card.
Choose which events reach you by email and which stay in-app.
collapse long, scannable sections (FAQs, settings groups).
hide primary content or required form fields behind a collapse.
Empty state
<gok-empty-state>No results found
Try a different search term or clear your filters.
a restrained placeholder for no-data / first-run, with one clear next action.
leave a blank area, or stack several competing actions.
Table
<gok-table>a property-driven data grid — sortable, selectable, density-aware, virtualizable.
nest grids, or box every cell — let hairline rules and the card frame carry structure.
Feedback & overlay
Telling people what happened, and floating layers. Status is rule + icon + word; overlays trap focus and return it.
Alert
<gok-alert>an inline, persistent message scoped to where its meaning lives — neutral surface + 2px status rule + word.
a saturated full-colour banner, or a transient message (use a toast).
Toast
<gok-toast>a transient, non-blocking confirmation; fire imperatively via the
toaster helper; it auto-dismisses.put an essential action or long text in a toast — it disappears.
Tooltip
<gok-tooltip>a short, supplementary label on hover/focus; appears on keyboard focus too.
put essential info or interactive content in a tooltip.
Popover
<gok-popover>Anyone with the link can view the result.
a click-opened, non-modal panel with interactive content; dismiss on outside-click / Escape.
use for a single decision that blocks the page — that's a dialog.
Dialog
<gok-dialog>The current build replaces the live site.
a single, focused decision; one primary action, focus trapped, returns focus on close.
open a dialog from a dialog, or stuff a long form in — make it a page.
Drawer
<gok-drawer>an edge-pinned modal panel for filters, a detail inspector, or a cart.
use for a primary decision (dialog) or permanent navigation (sidenav).
Spinner
<gok-spinner>indeterminate waits; a neutral track with one accent arc; stops under reduced-motion.
use when you know progress — show a progress bar instead.
Progress
<gok-progress>determinate progress with a known value and a label.
use for an unknown wait — that's a spinner.
Skeleton
<gok-skeleton>hold the layout while content loads; match the shape of what's coming.
show skeletons for long or indefinite loads — use a spinner with context.