Skip to main content

BlankButton

Host-as-button control (same interaction model as kittl-button): slot-first layout with no forced typography wrapper. Uses design-token focus rings on :host.

Preview
Loading preview…

Import​

// Web Component
import '@kittl/ui/BlankButton';

// React
import { BlankButton } from '@kittl/ui-react';

Usage​

Use host className / CSS for layout and interaction (full-width rows, grids). Consumer styles attach to kittl-blank-button in the document (same as kittl-button).

Web Component​

<kittl-blank-button type="button" aria-label="Open item">
  <kittl-image src="photo.jpg" alt=""></kittl-image>
</kittl-blank-button>

React​

<BlankButton type="button" className="my-row" aria-label="Open item" onClick={onOpen}>
  <Image src={url} alt="" />
  <Text variant="p3">{title}</Text>
</BlankButton>

Accessibility​

Prefer aria-label or visible text inside the slot. Set ARIA attributes on the host (kittl-blank-button).