{ "schemaVersion": "2.0.0", "components": [ { "name": "Button", "displayName": "Button", "slug": "button", "status": "pre-release", "description": "Button component for interface actions. Renders as a regular link when href is provided. Buttons should primarily be used to trigger events or actions.", "path": "button/button.js", "docs": "https://kesko.design/components/button/", "props": [ { "name": "variant", "type": "\"primary\" | \"secondary\" | \"neutral\" | \"success\" | \"error\"", "description": "The style variant of the button.", "default": "\"primary\"" }, { "name": "appearance", "type": "\"filled\" | \"outline\" | \"plain\" | \"text\"", "description": "The appearance of the button. Defaults to `filled`, or `outline` when `variant` is `error`. Plain HTML has no such default: write `appearance=\"outline\"` on an error button yourself." }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\"", "description": "The size of the button.", "default": "\"md\"" }, { "name": "expand", "type": "boolean", "description": "Makes the button fit its container.", "default": "false" }, { "name": "disabled", "type": "boolean", "description": "Disables the component. Native `disabled` on buttons, `aria-disabled` on links.", "default": "false" }, { "name": "loading", "type": "boolean", "description": "Shows a spinner and blocks activation with `aria-disabled`. The button stays focusable so keyboard and screen reader users keep their place. Pass a boolean whenever the button can load, `loading={isSaving}`: the status region that announces the wait is rendered as soon as the prop is set, so it exists before loading starts." }, { "name": "loadingLabel", "type": "string", "description": "Text announced by screen readers when `loading` turns on. Localize it or name what is loading, for example \"Saving order\". Pass an empty string to keep a button silent, for rows that load together while one message is announced elsewhere." }, { "name": "square", "type": "boolean", "description": "Forces a 1:1 aspect ratio at the size's height, for icon-only buttons and single characters such as page numbers. An icon-only button needs an accessible name: set `aria-label` on the button, or give the icon a `label`.", "default": "false" }, { "name": "aria-label", "type": "string", "description": "Accessible name. Icon-only (`square`) buttons need one: set it here, or give the icon a `label` instead." }, { "name": "aria-labelledby", "type": "string", "description": "`id` of an element that labels this button. Use instead of `aria-label` when the label is already visible elsewhere on the page." }, { "name": "aria-describedby", "type": "string", "description": "`id` of an element that describes this button (typically helper text)." }, { "name": "type", "type": "\"submit\" | \"reset\" | \"button\"", "description": "The type of the button.", "default": "\"button\"" }, { "name": "aria-controls", "type": "string", "description": "`id` of the element(s) controlled by this button." }, { "name": "aria-expanded", "type": "boolean | \"true\" | \"false\"", "description": "Whether a grouping controlled by this button is expanded." }, { "name": "aria-haspopup", "type": "boolean | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\" | \"true\" | \"false\"", "description": "Availability and type of popup this button opens." }, { "name": "href", "type": "string", "description": "Renders as an anchor element." }, { "name": "target", "type": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\"", "description": "Where to open the linked URL." }, { "name": "download", "type": "boolean | string", "description": "Triggers a file download. Pass `true` to use the server filename or a string to override it." } ], "events": [ { "name": "onClick", "type": "(event: MouseEvent) => void", "description": "Handler called on click (mouse, touch, or keyboard activation)." }, { "name": "onFocus", "type": "(event: FocusEvent) => void", "description": "Handler called when the element receives focus." }, { "name": "onBlur", "type": "(event: FocusEvent) => void", "description": "Handler called when the element loses focus." } ], "cssProperties": [ { "name": "--k-button-bg", "description": "Overrides the background color.", "default": "var(--k-color-theme-primary)" }, { "name": "--k-button-text", "description": "Overrides the text color.", "default": "var(--k-color-text-on-primary)" }, { "name": "--k-button-border", "description": "Overrides the border color.", "default": "transparent" }, { "name": "--k-button-bg-hover", "description": "Overrides the hover and pressed background color.", "default": "var(--k-color-highlight-primary)" }, { "name": "--k-button-text-hover", "description": "Overrides the hover and pressed text color.", "default": "var(--k-button-text)" }, { "name": "--k-button-border-hover", "description": "Overrides the hover and pressed border color.", "default": "transparent" }, { "name": "--k-button-radius", "description": "Overrides the border radius.", "default": "var(--k-radius-button)" }, { "name": "--k-button-focus", "description": "Overrides the focus ring color.", "default": "var(--k-color-border-focus)" }, { "name": "--k-button-height", "description": "Overrides the button height.", "default": "calc(line-height + 2 * padding)" } ], "guidelines": "## Accessibility\n\nUnder the hood this is a native `\n \n \n \n \n \n \n);\n", "html": "\n \n \n \n \n \n Plain\n \n \n \n" }, { "name": "accept-decline", "label": "Accept and decline", "tracks": [ "html", "react" ], "react": "import { Button, Stack } from \"@kesko/components\";\nimport { IconClear, IconTick } from \"@kesko/iconography/react\";\n\nexport default () => (\n \n \n \n \n);\n", "html": "\n \n \n" }, { "name": "as-link", "label": "As link", "tracks": [ "html", "react" ], "react": "import { Button, Stack } from \"@kesko/components\";\nimport { IconExternalLink, IconDownload } from \"@kesko/iconography/react\";\n\nexport default () => (\n \n \n \n \n);", "html": "\n \n External link\n \n \n \n Download PDF\n \n \n" }, { "name": "custom-style", "label": "Custom style", "tracks": [ "html", "react" ], "react": "import type { CSSProperties } from \"react\";\nimport { Button, Stack } from \"@kesko/components\";\n\nconst info = {\n \"--k-button-bg\": \"var(--k-color-status-info)\",\n \"--k-button-text\": \"var(--k-color-text-on-info)\",\n \"--k-button-bg-hover\": \"var(--k-color-highlight-info)\",\n} as CSSProperties;\n\nexport default () => (\n \n \n \n \n);\n", "html": "\n \n \n" }, { "name": "disabled", "label": "Disabled", "tracks": [ "html", "react" ], "react": "import { Button, Stack } from \"@kesko/components\";\n\nexport default () => (\n \n \n \n \n \n \n);\n", "html": "\n \n \n \n \n" }, { "name": "events", "label": "Events", "tracks": [ "html", "react" ], "react": "import { Button } from \"@kesko/components\";\n\nexport default () => (\n \n);", "html": "" }, { "name": "expand", "label": "Expand (full width)", "tracks": [ "html", "react" ], "react": "import { Button, Stack } from \"@kesko/components\";\nimport { IconArrowUp } from \"@kesko/iconography/react\";\n\nexport default () => (\n \n \n \n \n);", "html": "\n \n \n" }, { "name": "form", "label": "Form", "tracks": [ "html", "react" ], "react": "import { Button, Stack } from \"@kesko/components\";\n\nexport default () => (\n
event.preventDefault()}>\n \n \n \n \n \n
\n);\n", "html": "
\n \n \n \n \n \n
" }, { "name": "loading", "label": "Loading", "tracks": [ "html", "react" ], "react": "import { Button, Stack } from \"@kesko/components\";\n\nexport default () => (\n \n \n \n \n \n);\n", "html": "\n \n \n \n" }, { "name": "sizes", "label": "Sizes", "tracks": [ "html", "react" ], "react": "import { Button } from \"@kesko/components\";\nimport { IconBasketAddTo } from \"@kesko/iconography/react\";\n\nexport default () => (\n \n Large\n \n \n \n \n Medium\n \n \n \n \n Small\n \n \n \n \n \n);\n", "html": "
\n Large\n \n \n \n \n Medium\n \n \n \n \n Small\n \n \n \n \n
" }, { "name": "variants", "label": "Variants", "tracks": [ "html", "react" ], "react": "import { Button } from \"@kesko/components\";\nimport { IconBasketAddTo } from \"@kesko/iconography/react\";\n\nexport default () => (\n
\n Primary\n \n \n \n \n Secondary\n \n \n \n \n \n Neutral\n \n \n \n \n
\n \n);\n", "html": "
\n Primary\n \n \n \n \n Secondary\n \n \n \n \n
\n Neutral\n \n \n \n \n
\n
" } ], "preview": "\n \n \n" }, { "name": "Divider", "displayName": "Divider", "slug": "divider", "status": "pre-release", "description": "Divider component is used to visually separate and group elements horizontally or vertically.", "path": "divider/divider.js", "docs": "https://kesko.design/components/divider/", "props": [ { "name": "orientation", "type": "\"horizontal\" | \"vertical\"", "description": "The orientation of the divider.", "default": "\"horizontal\"" } ], "events": [], "cssProperties": [ { "name": "--k-divider-color", "description": "Overrides the divider color.", "default": "var(--k-color-border-divider)" }, { "name": "--k-divider-size", "description": "Overrides the divider size.", "default": "1px" } ], "guidelines": "## Accessibility\n\nThe divider is a `role=\"separator\"` with the matching `aria-orientation`, so screen readers can announce it as a break between content. It is not focusable and carries no text content.\n\n- **Separate sections, not sentences.** Place it between blocks of content or list groups, where a screen reader announcing “separator” adds meaning. Inside running text or a single label it only interrupts.\n- **Give vertical dividers a height.** A vertical divider only shows a line as tall as its container, with one line of text as the minimum.\n- **Keep it empty.** The component drops any children. A heading or a label that belongs to the next section goes after the divider, not inside it.\n- **Pick a stronger color when the line carries meaning.** The default `--k-color-border-divider` is a subtle neutral, about 2:1 against the page background, which is fine for a line that only tidies the layout. When people need to see the line to understand the page, use a color with 3:1 against the surface it sits on.\n\nSee the [accessibility guidelines](/accessibility/) and the [A11Y checklist](/a11y-checklist/) for more details.", "examples": [ { "name": "default", "label": "Default", "tracks": [ "html", "react" ], "react": "import { Divider, Stack } from \"@kesko/components\";\n\nexport default () => (\n \n Item\n \n Item\n \n Item\n \n);", "html": "\n Item\n \n Item\n \n Item\n" }, { "name": "color", "label": "Color", "tracks": [ "html", "react" ], "react": "import type { CSSProperties } from \"react\"\nimport { Divider } from \"@kesko/components\";\n\nexport default () => (\n \n);", "html": "" }, { "name": "orientation", "label": "Orientation", "tracks": [ "html", "react" ], "react": "import { Divider, Stack } from \"@kesko/components\";\n\nexport default () => (\n \n \n Item\n \n Item\n \n Item\n \n);", "html": "\n Item\n \n Item\n \n Item\n" }, { "name": "size", "label": "Size", "tracks": [ "html", "react" ], "react": "import type { CSSProperties } from \"react\"\nimport { Divider } from \"@kesko/components\";\n\nexport default () => (\n \n);", "html": "" } ], "preview": "\n \n \n \n" }, { "name": "Pagination", "displayName": "Pagination", "slug": "pagination", "status": "pre-release", "description": "The Pagination component enables the user to select a specific page from a range of pages with previous and next controls, collapsing long ranges with ellipses.", "path": "pagination/pagination.js", "docs": "https://kesko.design/components/pagination/", "props": [ { "name": "count", "type": "number", "description": "Total number of pages." }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\"", "description": "Size of the page and control buttons.", "default": "\"md\"" }, { "name": "siblingCount", "type": "number", "description": "Number of always-visible page buttons on each side of the active page.", "default": "1" }, { "name": "boundaryCount", "type": "number", "description": "Number of always-visible page buttons at the start and end of the range.", "default": "1" }, { "name": "pageLabel", "type": "(page: number) => string", "description": "Overrides the translated accessible name of a numbered page button, “Sivu 3” by default. Previous and next are named by their visible labels." }, { "name": "previousLabel", "type": "string", "description": "Label for the previous-page button: visible text, or the accessible name when `hideLabels` is set." }, { "name": "nextLabel", "type": "string", "description": "Label for the next-page button: visible text, or the accessible name when `hideLabels` is set." }, { "name": "hideLabels", "type": "boolean", "description": "Shows the previous and next controls as icon-only square buttons, named by `previousLabel` and `nextLabel`.", "default": "false" }, { "name": "hidePrevious", "type": "boolean", "description": "Hides the previous-page button.", "default": "false" }, { "name": "hideNext", "type": "boolean", "description": "Hides the next-page button.", "default": "false" }, { "name": "page", "type": "number", "description": "The currently active page (1-based)." }, { "name": "aria-label", "type": "string", "description": "Accessible label for the navigation landmark." }, { "name": "href", "type": "(paginationItem: PaginationItem) => string", "description": "Returns the href for a page item as well as next and prev buttons, rendering the items as links." } ], "events": [ { "name": "onChange", "type": "(page: number, event: MouseEvent) => void", "description": "Called with the newly selected page and the originating click event." } ], "cssProperties": [ { "name": "--k-pagination-column-gap", "description": "Overrides the horizontal gap between items.", "default": "var(--k-space-3xs)" }, { "name": "--k-pagination-row-gap", "description": "Overrides the vertical gap between the page list and the controls.", "default": "var(--k-space-2xs)" }, { "name": "--k-pagination-color", "description": "Overrides the current page background. Also colors the text of the other items unless `--k-pagination-color-item` is set.", "default": "var(--k-color-theme-primary)" }, { "name": "--k-pagination-color-hover", "description": "Overrides the hover and pressed background of the current page. Also colors the hover text of the other items unless `--k-pagination-color-item` or `--k-pagination-color-item-hover` is set.", "default": "var(--k-color-highlight-primary)" }, { "name": "--k-pagination-color-text", "description": "Overrides the text color on the current page.", "default": "var(--k-color-text-on-primary)" }, { "name": "--k-pagination-color-item", "description": "Overrides the text of the other pages, the controls and the ellipsis. Set it when the accent is a fill that is not readable as text, as the secondary color is in dark mode.", "default": "var(--k-color-text-primary)" }, { "name": "--k-pagination-color-item-hover", "description": "Overrides the hover and pressed text of the other pages and controls.", "default": "var(--k-pagination-color-item)" }, { "name": "--k-pagination-color-tint", "description": "Overrides the hover and pressed background of the other pages and controls.", "default": "var(--k-color-bg-primary)" } ], "guidelines": "## Accessibility\n\nUnder the hood this is a `