Button

Status: Planned — Button is designed for the upcoming @bettertui/react adapter. It is not yet available in @bettertui/core. Check Select for a keyboard-navigable alternative today.

Button will provide an interactive, focusable button with press and focus states.

Planned API

import { Button } from '@bettertui/react';

function App() {
  return (
    <Box flexDirection="column" gap={1}>
      <Button onPress={() => console.log('clicked')}>
        Click me
      </Button>
      <Button onPress={() => process.exit(0)} variant="danger">
        Quit
      </Button>
    </Box>
  );
}

Planned Props

Prop	Type	Default	Description
onPress	() => void	—	Press handler
onFocus	() => void	—	Focus handler
onBlur	() => void	—	Blur handler
isDisabled	boolean	false	Disable interaction
variant	'default' | 'danger' | 'primary'	'default'	Visual variant

Keyboard Interaction (planned)

• Enter / Space — Press the button
• Tab — Move focus forward
• Shift+Tab — Move focus backward

Vanilla Alternative

Until the React adapter ships, use a focusable Box with a keydown handler:

import { Box, Text, RenderableEvents, createCliRenderer } from '@bettertui/core';

const renderer = await createCliRenderer({ exitOnCtrlC: true });

const btn = new Box(renderer, {
  border: true,
  borderStyle: 'round',
  padding: 1,
  focusable: true,
  focusedBorderColor: '#7aa2f7',
});

btn.add(new Text(renderer, { content: 'Press Enter', fg: '#c0caf5' }));

btn.on(RenderableEvents.FOCUSED, () => {
  btn.onKeyDown = (key) => {
    if (key.name === 'return') console.log('Button pressed!');
  };
});

renderer.root.add(btn);
btn.focus();
renderer.start();