Buttons

Text Button Example

About

• TextButton: text label with optional icon; variants: main, ghost

• IconButton: icon-only button; variants: main, ghost, activated, coverup, overlay, error

Both buttons are disabled when onClick is not provided.

Properties

TextButton

Property	Type	Required	Description
label	string	Yes	Button text
Icon	Icons component	Yes	Icon component
onClick	function	No	Click handler
type	"main"	"ghost"	No

IconButton

Property	Type	Required	Description
Icon	Icons component	Yes	Icon to render
label	string	Yes	Accessible label
type	"main"	"ghost"	"activated"
onClick	function	No	Click handler

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

• Icons

• Theming