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.

Import​

import '@kittl/ui/BlankButton';
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).

<kittl-blank-button type="button" aria-label="Open item">
  <kittl-image
    src="https://picsum.photos/seed/kittl/160/90"
    alt=""
  ></kittl-image>
</kittl-blank-button>
import { BlankButton, Image, Text } from '@kittl/ui-react';

/** Basic BlankButton usage, rendered live on the docs site. */
export const BlankButtonUsage = () => (
  <BlankButton
    type="button"
    className="my-row"
    aria-label="Open item"
    onClick={() => console.log('open')}
  >
    <Image src="https://picsum.photos/seed/kittl/160/90" alt="" />
    <Text variant="p3">Summer collection</Text>
  </BlankButton>
);

Props​

PropertyAttributeTypeDefaultDescription
typetype'button' | 'submit' | 'reset''button'HTML button type
disableddisabledboolean—Disable the button

Accessibility​

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