TEI Publisher Components - Native Design System

Modern, accessible components using native HTML elements

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

We'll use this to contact you

Input States

Please enter a valid email address

Dropdowns

Native Select

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:

Accessibility Features

Focus Management

Try navigating with the Tab key:

Screen Reader Support

Icon button with proper aria-label