Material Design 3 Components

A showcase of all Material Design 3 web components available for use in this website.

Buttons

Filled Button (Primary CTA)

Download App Disabled 
<md-filled-button>Download App</md-filled-button>

Filled Tonal Button (Secondary Action)

Buy me a Coffee Disabled 
<md-filled-tonal-button>Buy me a Coffee</md-filled-tonal-button>

Outlined Button

Learn More Disabled 
<md-outlined-button>Learn More</md-outlined-button>

Text Button (Tertiary)

View Details Disabled 
<md-text-button>View Details</md-text-button>

Icon Button

settings favorite share 
<md-icon-button aria-label="Settings">
  <md-icon>settings</md-icon>
</md-icon-button>

FAB (Floating Action Button)

add edit delete 
<md-fab aria-label="Create new item">
  <md-icon slot="icon">add</md-icon>
</md-fab>

Cards

Elevated Card

Feature Title

This is an elevated card with a subtle shadow for visual hierarchy.

 
<md-elevated-card>
  <div class="card-content">
    <h4>Feature Title</h4>
    <p>Card description...</p>
  </div>
</md-elevated-card>

Filled Card

Feature Title

This is a filled card with a solid background color.

 
<md-filled-card>
  <div class="card-content">
    <h4>Feature Title</h4>
    <p>Card description...</p>
  </div>
</md-filled-card>

Outlined Card

Feature Title

This is an outlined card with a border and minimal background.

 
<md-outlined-card>
  <div class="card-content">
    <h4>Feature Title</h4>
    <p>Card description...</p>
  </div>
</md-outlined-card>

Text Fields & Forms

Filled Text Field

<md-filled-text-field
  label="Name"
  type="text"
  placeholder="Enter your name"
></md-filled-text-field>

Outlined Text Field

<md-outlined-text-field
  label="Message"
  type="text"
  placeholder="Enter your message"
  rows="3"
></md-outlined-text-field>

Filled Select

General Inquiry Support Feedback Other 
<md-filled-select label="Category">
  <md-select-option value="general">General Inquiry</md-select-option>
  <md-select-option value="support">Support</md-select-option>
</md-filled-select>

Checkbox

<md-checkbox></md-checkbox>
<label>I agree to the terms</label>

Radio Button

<md-radio name="option"></md-radio>
<label>Option 1</label>

Switch

<md-switch></md-switch>
<label>Enable notifications</label>

Lists

List with Items

home
Home
 schedule
Stopwatch
 info
Support
 apps
About
 
<md-list>
  <md-list-item>
    <md-icon slot="start">home</md-icon>
    <div slot="headline">Home</div>
  </md-list-item>
</md-list>

Navigation Components

Navigation Bar

home home Home schedule schedule Stopwatch info info Support 
<md-navigation-bar>
  <md-navigation-tab aria-label="Home" active>
    <md-icon slot="active-icon">home</md-icon>
    <md-icon slot="inactive-icon">home</md-icon>
    <span slot="label">Home</span>
  </md-navigation-tab>
</md-navigation-bar>

Navigation Drawer

Navigation drawers are typically full-screen. See MobileDrawer.astro for implementation.

<md-navigation-drawer>
  <md-list>
    <md-list-item>
      <md-icon slot="start">home</md-icon>
      <div slot="headline">Home</div>
    </md-list-item>
  </md-list>
</md-navigation-drawer>

Dialogs

Dialog

Open Dialog
Dialog Title

This is a dialog component. It can display content in a modal window.

Cancel OK 
<md-dialog id="my-dialog">
  <div slot="headline">Dialog Title</div>
  <form slot="content" method="dialog">
    <p>Content here...</p>
  </form>
  <div slot="actions">
    <md-text-button>Cancel</md-text-button>
    <md-filled-button>OK</md-filled-button>
  </div>
</md-dialog>

Progress Indicators

Linear Progress

Loading... (65%)

<md-linear-progress value="0.65"></md-linear-progress>

Circular Progress

<md-circular-progress value="0.75"></md-circular-progress>

Badges

Badge

Messages 
<md-filled-button>
  Messages
  <md-badge slot="badge" value="3"></md-badge>
</md-filled-button>

Typography (M3 Tokens)

Type Scale

Display Large
Headline Medium
Title Large
Body Large
Label Large

Material Symbols Outlined Icons

Navigation & Action Icons

home home
menu menu
close close
search search
arrow_back arrow_back
arrow_forward arrow_forward
arrow_upward arrow_upward
arrow_downward arrow_downward
refresh refresh
more_vert more_vert
apps apps
settings settings

Communication & Social Icons

email email
mail mail
phone phone
chat chat
message message
share share
group group
person person
account_circle account_circle
contact_mail contact_mail
send send
reply reply

Content & File Icons

edit edit
create create
edit_note edit_note
list list
list_alt list_alt
view_list view_list
description description
folder folder
folder_open folder_open
export_notes export_notes
archive archive
download download

Time & Calendar Icons

schedule schedule
timer timer
timer_play timer_play
timer_pause timer_pause
stop stop
play_arrow play_arrow
pause pause
calendar_today calendar_today
date_range date_range
event event
alarm alarm
access_time access_time

Finance & Data Icons

paid paid
payment payment
credit_card credit_card
account_balance account_balance
attach_money attach_money
trending_up trending_up
analytics analytics
bar_chart bar_chart
pie_chart pie_chart
calculate calculate
functions functions
track_changes track_changes

UI & Feedback Icons

info info
help help
warning warning
error error
success success
check_circle check_circle
verified verified
star star
favorite favorite
notifications notifications
dark_mode dark_mode
light_mode light_mode

Device & Hardware Icons

phone_android phone_android
computer computer
smartphone smartphone
tablet tablet
watch watch
tv tv
headphones headphones
speaker speaker
keyboard keyboard
mouse mouse
usb usb
battery_full battery_full

Transportation & Location Icons

location_on location_on
place place
directions_car directions_car
directions_bus directions_bus
directions_subway directions_subway
directions_walk directions_walk
flight flight
local_shipping local_shipping
local_gas_station local_gas_station
local_hotel local_hotel
local_restaurant local_restaurant
navigation navigation

This is a curated selection of commonly used Material Symbols Outlined icons. See Google Fonts - Material Symbols for the complete official icon set (currently 1,200+ icons).

Resources & Documentation