This is a sample Katal application, demonstrating how to use Katal Components as well as build-and-deploy tooling. Please contact the Katal team at katal-team@amazon.com with any questions or comments. To continue this demo, please dismiss this alert.

Demonstration: Using Katal Components

<kat-button variant="primary" label="Primary Button"></kat-button>

<kat-button variant="secondary" label="Secondary Button"></kat-button>

Katal gives developers the ability to use custom-designed elements to build their web pages. For example, if the developer needs a button, they can use <kat-button></kat-button> instead of building a button themselves.

Katal offers design-approved components for use in web pages that can be configured with labels and custom settings. For example: regular buttons and secondary buttons, different only in their 'variant' attribute.

Demonstration: JavaScript with Katal Components

This alert component is having its variant changed by JavaScript

Because Katal Components are extensions of HTML elements, JavaScript can interact with them the same as built-in HTML elements. Here we see JavaScript changing the 'variant' attribute on the alert.

Demonstration: Complex Katal Components

First Tab Content

Second tab content

Third tab content

Fourth tab content

Some components can contain HTML content, like our KatalTabs component. These complex components provide an API so developers and frameworks can interact with them.