TEI Publisher Components - Native Design System

Color Palette

Primary

Primary Dark

Primary Light

Error

Success

Warning

Buttons

Button Variants

<button class="pb-button pb-button--text">Text Button</button>
<button class="pb-button pb-button--outlined">Outlined Button</button>
<button class="pb-button pb-button--contained">Contained Button</button>
        

Button Sizes

Icon Buttons

Buttons with Icons

Form Inputs

Text Inputs with Floating Labels

Full Name

Email Address

We'll use this to contact you

Website URL

Input States

Email (Error State)

Please enter a valid email address

Disabled Input

Dropdowns

Native Select

Select Option

Custom Dropdown

Tabs

Overview

This is the overview panel content. It provides a general introduction to the design system and its components.

Native HTML elements
Material Design inspired
Fully accessible
Mobile responsive

Icons

Icon Sizes

Available Icons

save

edit

delete

search

expand-more

expand-less

add

copy

download

close

menu

chevron-right

Responsive Design

Resize to Test Responsiveness

Drag the right border of the container below to see how components adapt:

Responsive Input

Accessibility Features

Focus Management

Try navigating with the Tab key:

Screen Reader Support

Icon button with proper aria-label