Buttons

Text Button Example

About

Touchpoint provides two types of button components for handling user interactions: TextButton and IconButton. These components offer consistent styling and behavior while serving different interaction needs.

  • TextButton - Text-based interactive element with optional icon support. It's ideal for primary actions and menu items.

  • IconButton - Icon-only interactive element. It's ideal for compact actions and toolbars.

Properties

Both TextButton and IconButton have required properties to render the elements correctly in the conversations flow.

TextButton Properties

Property
Type
Required
Description

label

string

Yes

Button text

Icon

Icon

Yes

Icon component

onClick

function

No

Click handler

type

  • main: Primary action button with full background

  • ghost: Secondary action with transparent background

No

Button style variant

IconButton Properties

Property
Type
Required
Description

Icon

Icon

Yes

Icon component to render

label

string

Yes

Accessible label (for screen readers)

type

  • main: Primary action button with full background color.

  • ghost: Secondary action with transparent background.

  • activated: Accent colored background with light text.

  • coverup: Semi-transparent button with backdrop blur effect.

  • overlay: Similar to coverup but with background color matching the app background.

Yes

Button style variant

onClick

function

No

Click handler

Import and Basic Usage

You can import the buttons elements from touchpoint once the package has been installed or made available in your project.

Define onClick

The Button Component expect a function passed via onClick to define the actions to take when a user clicks the button.

Access the ConversationHandler method sendChoice via conversationHandler.sendChoice to send the user's choice back to NLX.

Read more details about building Custom Components with Touchpoint in the Getting started with Touchpoint components documentation page.

Example

The examples below require a modality defined in your NLX application as an object with at least buttonLabel and buttonId properties.

Example Modality Schema

{
  "buttonLabel": "Label passed to button Component",
  "buttonId": "Id of the 'choice' to send back to NLX"
}

Example Button Components

const TextButtonExample = ({ data, conversationHandler }) => {
  return html`
    <TextButton
      label=${data.buttonLabel}
      Icon=${Icons.ArrowForward}
      onClick=${() => conversationHandler.sendChoice(data.buttonId)}
    />
  `;
};

const IconButtonExample = ({ data, conversationHandler }) => {
  return html`
    <IconButton
      label=${data.buttonLabel}
      Icon=${Icons.ArrowForward}
      onClick=${() => conversationHandler.sendChoice(data.buttonId)}
      type="main"
    />
  `;
};

// Register components when creating touchpoint
const touchpoint = await create({
  config: {
    applicationUrl: "YOUR_APPLICATION_URL",
    headers: { "nlx-api-key": "YOUR_API_KEY" },
    languageCode: "en-US",
  },
  customModalities: {
    TextButtonModality: TextButtonExample,
    IconButtonModality: IconButtonExample,
  },
});

Related Documents

Last updated