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

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.