Filled background with high contrast text
Transparent background with colored border, fills with subtle color on hover
No border or background initially, shows subtle background on hover
Text-only styling, changes color on hover like a link
Copy and paste the following code to use buttons in your project
<!-- Solid Button -->
<base-button variant="solid-primary">Primary</base-button>
<base-button variant="solid-secondary">Secondary</base-button>
<base-button variant="solid-danger">Danger</base-button>
<!-- Outlined Button -->
<base-button variant="outlined-primary">Primary</base-button>
<!-- Ghost Button -->
<base-button variant="ghost-primary">Primary</base-button>
<!-- Link Button -->
<base-button variant="link-primary">Primary</base-button>
<!-- With States -->
<base-button variant="solid-primary" disabled>Disabled</base-button>
<base-button variant="solid-primary" loading>Loading</base-button>
<!-- Sizes -->
<base-button variant="solid-primary" size="sm">Small</base-button>
<base-button variant="solid-primary" size="md">Medium</base-button>
<base-button variant="solid-primary" size="lg">Large</base-button>
<!-- Full Width -->
<base-button variant="solid-primary" full-width>Full Width</base-button>Copy and paste the following code to use inputs in your project
<!-- Basic Input -->
<base-input
label="Email"
type="email"
placeholder="Enter your email"
size="md"
></base-input>
<!-- With Value -->
<base-input
label="Website"
type="url"
value="https://example.com"
size="md"
></base-input>
<!-- Required Field -->
<base-input
label="Password"
type="password"
placeholder="Enter your password"
required
size="md"
></base-input>
<!-- With Hint -->
<base-input
label="Phone"
type="tel"
placeholder="+1 (555) 000-0000"
hint="We'll never share your phone number"
size="md"
></base-input>
<!-- Error State -->
<base-input
label="Username"
type="text"
error="This field is required"
size="md"
></base-input>
<!-- Disabled -->
<base-input
label="Disabled"
type="text"
value="Cannot edit this"
disabled
size="md"
></base-input>Copy and paste the following code to use selects in your project
<!-- Basic Select -->
<base-select
id="select-country"
label="Country"
placeholder="Select a country"
size="md"
></base-select>
<!-- Searchable Select -->
<base-select
id="select-searchable"
label="Searchable Select"
placeholder="Search for a fruit..."
searchable
size="md"
></base-select>
<!-- Required Field -->
<base-select
id="select-required"
label="Required Field"
placeholder="Choose an option"
required
size="md"
></base-select>
<!-- With Hint -->
<base-select
id="select-hint"
label="With Hint"
placeholder="Select a priority"
hint="Choose the urgency level"
size="md"
></base-select>
<!-- Error State -->
<base-select
id="select-error"
label="Error State"
placeholder="Select an option"
error="This field is required"
size="md"
></base-select>
<!-- Disabled -->
<base-select
id="select-disabled"
label="Disabled"
placeholder="Cannot select"
disabled
size="md"
></base-select>Copy and paste the following code to use textareas in your project
<!-- Basic Textarea -->
<base-textarea
label="Description"
placeholder="Enter a description..."
size="md"
rows="4"
></base-textarea>
<!-- With Hint -->
<base-textarea
label="Comments"
placeholder="Add your comments here..."
hint="Maximum 500 characters"
maxlength="500"
size="md"
rows="4"
></base-textarea>
<!-- Required Field -->
<base-textarea
label="Required Field"
placeholder="This field is required"
required
size="md"
rows="4"
></base-textarea>
<!-- Error State -->
<base-textarea
label="Error State"
error="This field cannot be empty"
size="md"
rows="4"
></base-textarea>
<!-- Disabled -->
<base-textarea
label="Disabled"
value="This content cannot be edited"
disabled
size="md"
rows="4"
></base-textarea>
<!-- Resizable -->
<base-textarea
label="Both Resize"
placeholder="Resize both ways"
resize="both"
size="md"
rows="4"
></base-textarea>Extra Small (xs)
Current value: 0
Small (sm)
Current value: 1
Medium (md) - Default
Current value: 5
Large (lg)
Current value: 10
Limited Range (0-10)
Current value: 5
Input Read-Only (buttons only)
Current value: 3
Copy and paste the following code to use quantity selects in your project
<!-- Basic Quantity Select -->
<quantity-select
id="quantity-basic"
value="0"
min="0"
max="99"
size="md"
></quantity-select>
<!-- With Default Value -->
<quantity-select
id="quantity-default"
value="5"
min="0"
max="99"
size="md"
></quantity-select>
<!-- Limited Range -->
<quantity-select
id="quantity-limited"
value="5"
min="0"
max="10"
size="md"
></quantity-select>
<!-- Different Sizes -->
<quantity-select value="0" min="0" max="99" size="xs"></quantity-select>
<quantity-select value="0" min="0" max="99" size="sm"></quantity-select>
<quantity-select value="0" min="0" max="99" size="md"></quantity-select>
<quantity-select value="0" min="0" max="99" size="lg"></quantity-select>
<!-- Listening to Changes -->
<script>
const quantitySelect = document.getElementById('quantity-basic');
quantitySelect.addEventListener('quantity-change', (e) => {
console.log('New quantity:', e.detail.value);
});
</script>Click buttons to open drawers. Drag down or click overlay to close.
Copy and paste the following code to use drawers in your project
<!-- Button to Open Drawer -->
<base-button variant="solid-primary" onclick="document.getElementById('my-drawer').open()">
Open Drawer
</base-button>
<!-- Drawer Component -->
<base-drawer id="my-drawer" size="md">
<div style="padding: var(--space-4);">
<h2>Drawer Title</h2>
<p>Drawer content goes here</p>
<base-button
variant="solid-primary"
onclick="document.getElementById('my-drawer').close()"
>
Close
</base-button>
</div>
</base-drawer>
<!-- Different Sizes -->
<base-drawer size="sm"></base-drawer> <!-- 320px -->
<base-drawer size="md"></base-drawer> <!-- 480px -->
<base-drawer size="lg"></base-drawer> <!-- 640px -->
<!-- Using JavaScript -->
<script>
const drawer = document.getElementById('my-drawer');
// Open drawer
drawer.open();
// Close drawer
drawer.close();
// Listen to events
drawer.addEventListener('drawer-open', () => {
console.log('Drawer opened');
});
drawer.addEventListener('drawer-close', () => {
console.log('Drawer closed');
});
</script>You're clicking on them
Copy and paste the following code to use tabs in your project
<!-- Basic Tabs -->
<base-tabs variant="horizontal" aria-label="Example tabs">
<base-tab id="tab1" label="Tab 1">
<p>Content for tab 1</p>
</base-tab>
<base-tab id="tab2" label="Tab 2">
<p>Content for tab 2</p>
</base-tab>
<base-tab id="tab3" label="Tab 3">
<p>Content for tab 3</p>
</base-tab>
</base-tabs>
<!-- Tabs with Icons -->
<base-tabs variant="horizontal">
<base-tab
id="home"
label="Home"
icon='<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>'
>
<p>Home content</p>
</base-tab>
</base-tabs>
<!-- Sidebar Variant -->
<base-tabs variant="sidebar">
<base-tab id="settings" label="Settings">
<p>Settings content</p>
</base-tab>
</base-tabs>
<!-- Programmatic Control -->
<script>
const tabs = document.querySelector('base-tabs');
// Switch to specific tab
tabs.switchTab('tab2');
// Listen for tab changes
tabs.addEventListener('tab-change', (e) => {
console.log('Active tab:', e.detail.activeTab);
});
</script>Copy and paste the following code to use date and time pickers in your project
<!-- Date Picker -->
<base-date-picker
id="date-picker"
label="Select Date"
placeholder="Choose a date"
size="md"
></base-date-picker>
<!-- Time Picker (12-hour) -->
<base-time-picker
id="time-picker-12"
label="Select Time"
placeholder="Choose a time"
format="12"
size="md"
></base-time-picker>
<!-- Time Picker (24-hour) -->
<base-time-picker
id="time-picker-24"
label="Select Time"
placeholder="Choose a time"
format="24"
size="md"
></base-time-picker>
<!-- DateTime Picker -->
<base-datetime-picker
id="datetime-picker"
label="Select Date and Time"
placeholder="Choose date and time"
format="12"
size="md"
></base-datetime-picker>
<!-- With Hints and Required -->
<base-date-picker
label="Appointment Date"
placeholder="Select appointment date"
hint="Choose your preferred date"
required
size="md"
></base-date-picker>
<!-- Get Values -->
<script>
const datePicker = document.getElementById('date-picker');
const timePicker = document.getElementById('time-picker-12');
const dateTimePicker = document.getElementById('datetime-picker');
// Get selected values
console.log('Date:', datePicker.value);
console.log('Time:', timePicker.value);
console.log('DateTime:', dateTimePicker.value);
// Listen for changes
datePicker.addEventListener('change', (e) => {
console.log('Date changed:', e.target.value);
});
</script>This likely wont be useful for anyone but I wanted it published for my own projects
Copy and paste the following code to use auth components in your project
<!-- Auth Form in Drawer -->
<base-drawer id="auth-drawer" size="sm">
<auth-form
id="auth-form"
logo-url="https://example.com/logo.svg"
api-domain="https://api.example.com"
oauth-domain="https://auth.example.com"
oauth-region="us-east-1"
oauth-user-pool-id="us-east-1_XXXXXXXXX"
oauth-client-id="your-client-id"
oauth-spa-domain="https://oauth.example.com/"
></auth-form>
</base-drawer>
<!-- Button to Open Auth Drawer -->
<base-button
variant="solid-primary"
onclick="document.getElementById('auth-drawer').open()"
>
Login
</base-button>
<!-- Auth Methods -->
<script>
const authForm = document.getElementById('auth-form');
// Handle authentication events
authForm.addEventListener('auth-success', (e) => {
console.log('User authenticated:', e.detail);
console.log('Access token:', e.detail.accessToken);
console.log('ID token:', e.detail.idToken);
console.log('Refresh token:', e.detail.refreshToken);
});
authForm.addEventListener('auth-error', (e) => {
console.error('Auth error:', e.detail);
});
// Logout
authForm.logout();
// Refresh tokens
authForm.refreshTokens();
// Get current tokens
const tokens = authForm.getTokens();
</script>No border or shadow. Clean and minimal appearance.
Has border and shadow for depth and separation.
Perfect for custom layouts or full-width content.
Compact spacing (var(--space-4))
Default spacing (var(--space-6))
Generous spacing (var(--space-8))
Try hovering over me! The shadow increases on hover.
Hover to see the expand button appear in the top-right corner.
Demonstrates a card with custom internal structure
This card uses padding="none" to create custom sections with individual padding and borders.
Copy and paste the following code to use cards in your project
<!-- Basic Card -->
<base-card variant="default" padding="md">
<h4>Card Title</h4>
<p>Card content goes here</p>
</base-card>
<!-- Elevated Card -->
<base-card variant="elevated" padding="md">
<h4>Elevated Card</h4>
<p>Has border and shadow</p>
</base-card>
<!-- Padding Variants -->
<base-card variant="elevated" padding="none"></base-card>
<base-card variant="elevated" padding="sm"></base-card>
<base-card variant="elevated" padding="md"></base-card>
<base-card variant="elevated" padding="lg"></base-card>
<!-- Hoverable Card -->
<base-card variant="elevated" padding="md" hoverable>
<h4>Hoverable Card</h4>
<p>Hover effect on mouse over</p>
</base-card>
<!-- Expandable Card -->
<base-card variant="elevated" padding="md" expandable>
<h4>Expandable Card</h4>
<p>Can be expanded on hover</p>
</base-card>
<!-- Card with Custom Layout -->
<base-card variant="elevated" padding="none">
<div style="padding: var(--space-6); border-bottom: 1px solid var(--color-border);">
<h4>Header Section</h4>
</div>
<div style="padding: var(--space-6);">
<p>Content section</p>
<base-button variant="solid-primary">Action</base-button>
</div>
</base-card>This is a small drawer (320px wide on desktop). Perfect for quick actions or notifications.
This is a medium drawer (480px wide on desktop). Good for forms and detailed content.
This is a large drawer (640px wide on desktop). Ideal for complex forms or multi-step processes.
Large drawers can contain extensive content like: