Actions COPY-READY COMPONENT

Buttons

Primary, secondary and outline buttons with a real click handler.

SOURCE INCLUDEDBrowse library

Component studio/ buttons

PREVIEW SOURCE

PreviewINTERACTIVE

Choose a button style…

Loading Zidom preview…

Select or click a variant to inspect its matching source.

Source codeREAD ONLY / COPY READY

Primary button

Copy this usage snippet. The shared ZButton implementation is available below.

primary.tsx

● Zidom

import { ZButton } from '../buttons';// Copy the reusable ZButton implementation and buttons.css alongside this usage.export default function PrimaryButton() {  return <ZButton variant="primary" label="Create project" onPress={() => console.log('Created')} />;}

Secondary button

Copy this usage snippet. The shared ZButton implementation is available below.

secondary.tsx

● Zidom

import { ZButton } from '../buttons';export default function SecondaryButton() {  return <ZButton variant="secondary" label="Secondary action" onPress={() => console.log('Secondary')} />;}

Outline button

Copy this usage snippet. The shared ZButton implementation is available below.

outline.tsx

● Zidom

import { ZButton } from '../buttons';export default function OutlineButton() {  return <ZButton variant="outline" label="Outline action" onPress={() => console.log('Outline')} />;}

Disabled button

Copy this usage snippet. The shared ZButton implementation is available below.

disabled.tsx

● Zidom

import { ZButton } from '../buttons';export default function DisabledButton() {  return <ZButton variant="primary" label="Unavailable" disabled />;}

Shared ZButton implementation (required)

Each usage snippet imports the same ZButton from buttons.tsx.

buttons.tsx

TSX

Copy this exact source file into your Zidom project.

buttons.tsx

● Zidom

import { signal } from '@zidomjs/core';type ButtonProps = {  label: string;  variant?: 'primary' | 'secondary' | 'outline';  disabled?: boolean;  onPress?: () => void;};export function ZButton({ label, variant = 'primary', disabled = false, onPress }: ButtonProps) {  return <button type="button" className={'zb-button zb-button--' + variant}    disabled={disabled} onClick={onPress}>{label}</button>;}// This is the same component module shown in the copy panel.// Clicking a live example also selects its matching source snippet.export default function ButtonsPreview() {  const presses = signal(0);  const selected = signal('primary');  const choose = (variant: string) => {    selected.value = variant;    presses.value += 1;    document.dispatchEvent(new CustomEvent('zidom-block-variant', {      detail: { block: 'buttons', variant }    }));  };  return <div className="zb-stack">    <div className="zb-row" role="group" aria-label="Button variants">      <ZButton label="Create project" onPress={() => choose('primary')}/>      <ZButton label="Secondary" variant="secondary" onPress={() => choose('secondary')}/>      <ZButton label="Outline" variant="outline" onPress={() => choose('outline')}/>      <ZButton label="Disabled" disabled/>    </div>    <p className="zb-caption" role="status">      Selected: {selected} · Clicks: {presses}    </p>  </div>;}

buttons.css

CSS

Copy this exact source file into your Zidom project.

buttons.css

● Zidom

.zb-stack{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;min-width:0;max-width:100%}.zb-row{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:12px;width:100%;min-width:0;max-width:100%}.zb-row>.zb-button{flex:0 0 auto;position:relative;max-width:100%;white-space:nowrap}.zb-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:42px;padding:10px 15px;border-radius:9px;border:1px solid transparent;font:inherit;font-size:13px;font-weight:700;line-height:1.3;cursor:pointer;box-sizing:border-box;transition:background-color .15s,border-color .15s}.zb-button--primary{background:var(--mint);color:var(--mint-ink)}.zb-button--primary:hover:not(:disabled){background:var(--mint-bold)}.zb-button--secondary{background:var(--surface-alt);color:var(--ink);border-color:var(--line)}.zb-button--secondary:hover:not(:disabled){border-color:var(--muted)}.zb-button--outline{background:transparent;color:var(--ink);border-color:var(--line)}.zb-button--outline:hover:not(:disabled){background:var(--surface)}.zb-button:disabled{opacity:.48;cursor:not-allowed}.zb-button:focus-visible{outline:2px solid #68c6ff;outline-offset:3px}.zb-caption{margin:0;color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}

YOUR NEXT STEP

Make it yours.

Everything you see above is real Zidom code. Choose a source file, copy it, and adapt it in your project.

Copy the TSX and CSS from their respective tabs. Add both files to your project and import the stylesheet. TypeScript must use jsxImportSource: "@zidomjs/dom" with the Zidom Vite plugin. Setup guide →

← Explore more components Report an issue ↗