PixelBareButton

Unstyled passthrough <button> primitive — escape hatch for composing custom buttons without inheriting pixel-kit visuals.

  • Zero styling — renders a raw <button> with all native attributes forwarded
  • Defaults type="button" to prevent accidental form submissions
  • Its element is the native <button> itself, for focus and measurement: a ref in React, $el in Vue, the button[pxlBareButton] element in Angular
  • Ideal for icon triggers, custom-styled CTAs, or wrapping inside compound components
  • Tree-shakable and SSR-safe
Status
stable
Category
actions
Since
v1.0.0

API

import { PixelBareButton } from '@pxlkit/ui-kit';

No props of its own.

Also takes the native attributes and event handlers of <button> (ButtonHTMLAttributes<HTMLButtonElement>); type defaults to 'button'.

ref points to <button>.

Accessibility

WCAG target: 2.1 AA

  • button

Renders a native <button>, so keyboard activation and focus semantics come for free. Consumer is responsible for visible focus styles, contrast, and providing aria-label when the button has no text content (e.g. icon-only triggers).

Keyboard

KeyActionWhen
EnterActivates the button—
SpaceActivates the button—

Usage

import { PixelBareButton } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelBareButton>Bare button</PixelBareButton>;
}

Examples

Default

import { PixelBareButton } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelBareButton>Bare button</PixelBareButton>;
}

With custom class

import { PixelBareButton } from '@pxlkit/ui-kit';

export function WithCustomClass() {
  return (
    <PixelBareButton className="rounded-md border border-retro-border bg-retro-surface px-3 py-1 text-sm text-retro-text">
      Styled by consumer
    </PixelBareButton>
  );
}

With onClick

import React from 'react';
import { PixelBareButton } from '@pxlkit/ui-kit';

export function WithOnClick() {
  const [count, setCount] = React.useState(0);
  return (
    <PixelBareButton onClick={() => setCount((c) => c + 1)}>
      Clicked {count} times
    </PixelBareButton>
  );
}

Disabled

import { PixelBareButton } from '@pxlkit/ui-kit';

export function Disabled() {
  return (
    <PixelBareButton disabled className="cursor-not-allowed opacity-50">
      Disabled
    </PixelBareButton>
  );
}

Submit / reset type

import { PixelBareButton } from '@pxlkit/ui-kit';

export function SubmitType() {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
      }}
      className="flex gap-2"
    >
      <PixelBareButton type="submit">Submit</PixelBareButton>
      <PixelBareButton type="reset">Reset</PixelBareButton>
    </form>
  );
}

As icon trigger

import { PixelBareButton } from '@pxlkit/ui-kit';

export function AsIconTrigger() {
  return (
    <PixelBareButton
      aria-label="Close"
      className="inline-flex h-6 w-6 items-center justify-center text-retro-muted hover:text-retro-text"
    >
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
        <path d="M6 6l12 12M18 6L6 18" />
      </svg>
    </PixelBareButton>
  );
}

Related