Home
Nick Girga
Material 3 Buttons [Light]

Material 3 Buttons [Light]

Buttons that conform to Google's Material 3 design guidelines

This tailwind example is contributed by Nick Girga, on 18-May-2025. Component is made with Tailwind CSS v3.

<h1 class="text-xl">Buttons</h1>
        <div class="flex flex-col items-center gap-2">

<div class="flex flex-row items-center gap-2">

<button class="btn btn-elevated">Elevated</button>

<button class="btn btn-elevated pl-4">
                    <span class="material-symbols-outlined">add</span>
                    Icon
                </button>

<button class="btn btn-elevated pl-4" disabled>
                    <span class="material-symbols-outlined">add</span>
                    Disabled
                </button>

</div>

<div class="flex flex-row items-center gap-2">

<button class="btn">Filled</button>

<button class="btn pl-4">
                    <span class="material-symbols-outlined">add</span>
                    Icon
                </button>

<button class="btn pl-4" disabled>
                    <span class="material-symbols-outlined">add</span>
                    Disabled
                </button>

</div>

<div class="flex flex-row items-center gap-2">

<button class="btn btn-tonal">Tonal</button>

<button class="btn btn-tonal pl-4">
                    <span class="material-symbols-outlined">add</span>
                    Icon
                </button>

<button class="btn btn-tonal pl-4" disabled>
                    <span class="material-symbols-outlined">add</span>
                    Disabled
                </button>

</div>

<div class="flex flex-row items-center gap-2">

<button class="btn btn-outlined">Outlined</button>

<button class="btn btn-outlined pl-4">
                    <span class="material-symbols-outlined">add</span>
                    Icon
                </button>

<button class="btn btn-outlined pl-4" disabled>
                    <span class="material-symbols-outlined">add</span>
                    Disabled
                </button>

</div>

<div class="flex flex-row items-center gap-2">

<button class="btn btn-ghost">Ghost</button>

<button class="btn btn-ghost pl-4">
                    <span class="material-symbols-outlined">add</span>
                    Icon
                </button>

<button class="btn btn-ghost pl-4" disabled>
                    <span class="material-symbols-outlined">add</span>
                    Disabled
                </button>

</div>

<h1 class="text-xl mt-4">Icon Buttons</h1>
        <div class="flex flex-row items-center gap-2">

<button class="btn btn-elevated p-3">
                <span class="material-symbols-outlined">settings</span>
            </button>

<button class="btn p-3">
                <span class="material-symbols-outlined">settings</span>
            </button>

<button class="btn btn-tonal p-3">
                <span class="material-symbols-outlined">settings</span>
            </button>

<button class="btn btn-outlined p-3">
                <span class="material-symbols-outlined">settings</span>
            </button>

<button class="btn btn-ghost p-3">
                <span class="material-symbols-outlined">settings</span>
            </button>

</div>

<h1 class="text-xl mt-4">Floating Action Buttons</h1>
        <div class="flex flex-row items-center gap-2">

<button class="fab fab-large">
                <span class="material-symbols-outlined  !text-4xl">edit</span>
            </button>

<button class="fab">
                <span class="material-symbols-outlined">edit</span>
                Compose
            </button>

<button class="fab">
                <span class="material-symbols-outlined">edit</span>
            </button>

<button class="fab fab-small">
                <span class="material-symbols-outlined  !text-base">edit</span>
            </button>
            
        </div>

<h1 class="text-xl mt-4">Connected Toggle Buttons</h1>
        <div class="flex flex-row items-center gap-2">
            
            <div class="flex flex-row">
                <label class="toggle-button-label">
                    <input type="checkbox" class="peer toggle-button rounded-l-full" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 1
                </label>
                <label class="toggle-button-label">
                    <input type="checkbox" class="peer toggle-button" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 2
                </label>
                <label class="toggle-button-label">
                    <input type="checkbox" class="peer toggle-button rounded-r-full" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 3
                </label>
            </div>

</div>

<h1 class="text-xl mt-4">Connected Radio Buttons</h1>
        <div class="flex flex-row items-center gap-2">
            
            <div class="flex flex-row">
                <label class="toggle-button-label">
                    <input type="radio" name="radio-group-0" checked class="peer toggle-button rounded-l-full" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 1
                </label>
                <label class="toggle-button-label">
                    <input type="radio" name="radio-group-0" class="peer toggle-button" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 2
                </label>
                <label class="toggle-button-label">
                    <input type="radio" name="radio-group-0" class="peer toggle-button rounded-r-full" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 3
                </label>
            </div>

</div>

</div>
</body>

Related Examples