Components Overview

Button Component Available

The Sando Button component is now available! Other components are under active development. Check back soon or watch the repo for updates.

Planned Features

When complete, Sando will provide a collection of accessible Web Components built with Lit:

• ⚡ Framework-agnostic: Works with React, Vue, Angular, Svelte, or vanilla JS
• ♿ Accessible: WCAG 2.1 AA compliant
• 🎨 Themeable: Token-driven styling with flavor support
• 📦 Tree-shakeable: Import only what you need
• 🔒 TypeScript: Full type safety
• 🧪 Tested: Comprehensive unit and E2E tests

Available Components

✅ Button

Versatile, accessible button component with multiple variants, sizes, and advanced features including toggle support, icon-only mode, and link functionality.

Variants: solid, outline, ghost, text Sizes: xs, small, medium, large (all WCAG AA compliant 44x44px touch targets) States: default, hover, active, focus, disabled, loading Status: default, success, destructive Border Radius: none, default, full Features: icon-only, toggle buttons, render as link (href), icon props (start-icon/end-icon)

NEW in latest version:

• ✨ Extra small (xs) size for compact UIs
• ✨ Text variant for minimal inline links
• ✨ Icon-only mode with circular option (radius="full")
• ✨ Toggle button support with aria-pressed
• ✨ Render as <a> tag with href attribute
• ✨ Icon props (start-icon/end-icon) as alternative to slots
• ✨ Enhanced accessibility (WCAG 2.1 Level AA)

View Button Documentation →

🔜 Coming Soon

• Card - Container for content
• Input - Text input field
• Select - Dropdown selector
• Modal - Dialog overlay
• Tooltip - Contextual help
• Badge - Status indicators
• Avatar - User representation
• Checkbox - Selection control
• Radio - Single selection from group
• Switch - Toggle control
• Tabs - Content navigation
• Alert - Notification messages

Installation (When Available)

# Coming soon to npm
pnpm add @sando/components @sando/tokens

Current Status

The Button component is fully functional with comprehensive tests. Additional components are in development. You can:

• Explore the token system which is fully functional
• Use the Button component in your projects
• Contribute to development on GitHub

Planned Usage

Once available, components will be used like this:

Import

import '@sando/tokens/css'
import '@sando/components/button'

Use

<sando-button
  variant="solid"
  size="medium"
  flavor="original"
>
  Button Text
</sando-button>

With TypeScript

/// <reference types="@sando/components" />

const button = document.querySelector('sando-button')
button.variant = 'solid'  // Will be type-safe

Framework Integration (Planned)

React

import '@sando/components/button'

function App() {
  return (
    <sando-button
      variant="solid"
      onClick={(e) => console.log('Clicked!')}
    >
      Click me
    </sando-button>
  )
}

Vue

<template>
  <sando-button
    variant="solid"
    @click="handleClick"
  >
    Click me
  </sando-button>
</template>

<script setup>
import '@sando/components/button'

const handleClick = () => console.log('Clicked!')
</script>

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

<!-- component.html -->
<sando-button
  variant="solid"
  (click)="handleClick()"
>
  Click me
</sando-button>

Planned Customization

Override design tokens:

sando-button {
  --sando-button-solid-backgroundColor-default: #ff6b6b;
  --sando-button-solid-textColor-default: white;
}

Or apply flavors:

<sando-button variant="solid" flavor="original">
  Themed Button
</sando-button>

Planned Accessibility

All components will be built with accessibility in mind:

• ✅ Keyboard navigation
• ✅ Screen reader support
• ✅ ARIA attributes
• ✅ Focus management
• ✅ Color contrast (WCAG AA)

Browser Support (Target)

• ✅ Chrome/Edge 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Opera 76+

Contributing

Want to help build these components? Check out:

• Contributing Guide
• GitHub Issues
• Design System Architecture

Next Steps

While components are under development, you can:

• Explore Tokens - Fully functional token system
• Read Architecture Guide - Understand the three-layer system
• Review Testing Strategy - 2,200+ tests for tokens
• Learn About Theming - How the flavor system works