Form Controls

Button

Primary, secondary, destructive, and ghost variants on a native button.

Element: <button>
Module: @basenative/components
Function: renderButton

Quick start

Import the render function and call it from your server template.

import { renderButton } from '@basenative/components';

renderButton('Save', { variant: 'primary' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Variants

Primary, secondary, destructive, and ghost.

Live render

Source

renderButton('Primary',     { variant: 'primary' })
renderButton('Secondary',   { variant: 'secondary' })
renderButton('Destructive', { variant: 'destructive' })
renderButton('Ghost',       { variant: 'ghost' })

Disabled

Sets the disabled attribute and reduces emphasis.

Live render

Source

renderButton('Disabled', { variant: 'primary',   disabled: true })
renderButton('Disabled', { variant: 'secondary', disabled: true })

Interactive counter

Click events wired to a signal. The button is a real <button> element — no div with onclick.

Live render

Source

import { signal, effect } from '@basenative/runtime';

const count = signal(0);
effect(() => out.textContent = count());

inc.onclick   = () => count.set(count() + 1);
dec.onclick   = () => count.set(count() - 1);
reset.onclick = () => count.set(0);

Options

Arguments accepted by renderButton().

renderButton option reference
Option	Type	Default	Description
`content`	`string`	`—`	Button label text.
`variant`	`'primary' \| 'secondary' \| 'destructive' \| 'ghost'`	`'primary'`	Visual treatment.
`disabled`	`boolean`	`false`	Adds the disabled attribute and reduces emphasis.
`attrs`	`string`	`''`	Extra HTML attributes appended to the button tag.