Buttons

Run an action or open a page.

Example

import { useState } from "react";
import { Button, Screen } from "ink";

export default function Counter() {
  const [count, setCount] = useState(0);

  return <Screen title="Counter">
    <Button onPress={() => setCount(count + 1)}>
      Count: {count}
    </Button>
  </Screen>;
}

Use onPress for an action, or href to open a page.

<Button href="/settings">Settings</Button>

Counter button showing Count: 1 after a tap.

Icons

Add an icon, with or without a label.

import { add, playArrowFilled, replayFilled, shuffleFilled, skipNextFilled, skipPreviousFilled } from "ink/icons";

<Button icon={add} onPress={addItem}>
  Add item
</Button>
<Stack axis="horizontal" justify="space-between" align="center">
  <Button icon={shuffleFilled} onPress={shuffle} />
  <Button icon={skipPreviousFilled} onPress={previous} />
  <Button icon={playArrowFilled} onPress={play} />
  <Button icon={skipNextFilled} onPress={next} />
  <Button icon={replayFilled} onPress={replay} />
</Stack>

Add item button with a plus icon, above a row of shuffle, previous, play, next and replay buttons.

Selected

selected underlines the button.

<Button
  selected={selected}
  onPress={() => setSelected(!selected)}
>
  Option 1
</Button>

Disabled

disabled greys out the button and prevents presses.

<Button onPress={continueToNextPage}>
  Continue
</Button>
<Button disabled onPress={continueToNextPage}>
  Continue
</Button>

An enabled Continue button above a grey disabled Continue button.

Long labels

Long labels end with an ellipsis.

A long button label truncated with an ellipsis.

Long press

Use onLongPress for an additional action, such as opening an options menu. A long press does not trigger onPress.

<Button onPress={openPass} onLongPress={openOptions}>
  Membership
</Button>