Button Components

Floating Action Buttons (FAB)

Floating action buttons (FABs) help people take primary actions. They're used to represent the most important action on a screen, such as Create or Reply. A FAB represents the most important action on a screen and puts key actions within reach.

size="small" (40px)
Default (56px)
size="large" (96px)
color="secondary"
color="tertiary"
With href
disabled

Filled Buttons

Filled buttons are high-emphasis buttons that use color fill and elevation to stand out. They are used for primary actions.

Default
color="secondary"
color="tertiary"
disabled
icon="add"
With aria_label

Tonal Buttons

Tonal buttons are medium-emphasis buttons that use a lighter tone of the primary color. They are useful for actions that need more prominence than elevated buttons.

Default
color="secondary"
color="tertiary"
disabled
icon="edit"
With aria_label

Text Buttons

Text buttons are low-emphasis buttons that display the action as text without container styling. They are used for less important actions or in places where space is limited.

Default
color="secondary"
color="tertiary"
disabled
icon="link"
With aria_label

Outlined Buttons

Outlined buttons are medium-emphasis buttons with a visible border and no container fill. They are useful for important actions that need more prominence than text buttons but less than filled buttons.

Default
color="secondary"
color="tertiary"
disabled
icon="download"
With aria_label

Icon Buttons

Icon buttons are compact buttons that display only an icon. They provide common actions while taking up minimal space. Available in several variants: standard (default), filled, tonal, and outlined.

Standard (default)

Default
color="secondary"
color="tertiary"
disabled

Filled variant

variant="filled"
color="secondary"
color="tertiary"
disabled

Tonal variant

variant="tonal"
color="secondary"
color="tertiary"
disabled

Outlined variant

variant="outlined"
color="secondary"
color="tertiary"
disabled

Elevated Buttons

Elevated buttons are medium-emphasis buttons that use elevation to stand out. They are used for important but not primary actions.

Default
color="secondary"
color="tertiary"
disabled
icon="star"
With aria_label

Usage

<!-- Floating Action Button (FAB) -->
<c-button.fab aria_label="Create">add</c-button.fab>

<!-- FAB with size variations -->
<c-button.fab size="small" aria_label="Add item">add</c-button.fab>
<c-button.fab size="large" aria_label="Create post">add</c-button.fab>

<!-- FAB with color variants -->
<c-button.fab color="secondary" aria_label="Take photo">photo_camera</c-button.fab>
<c-button.fab color="tertiary" aria_label="Share">share</c-button.fab>

<!-- FAB with positioning -->
<c-button.fab class="absolute bottom-6 right-6 z-10" aria_label="Add new item">add</c-button.fab>

<!-- FAB with href link -->
<c-button.fab href="/create" aria_label="Create new item">add</c-button.fab>

<!-- Disabled FAB -->
<c-button.fab disabled aria_label="Action disabled">add</c-button.fab>

<!-- Filled Button (high emphasis) -->
<c-button.filled>Button Text</c-button.filled>

<!-- Tonal Button (medium-high emphasis) -->
<c-button.tonal>Tonal Button</c-button.tonal>

<!-- Elevated Button (medium emphasis) -->
<c-button.elevated>Elevated Button</c-button.elevated>

<!-- Outlined Button (medium emphasis) -->
<c-button.outlined>Outlined Button</c-button.outlined>

<!-- Text Button (low emphasis) -->
<c-button.text>Text Button</c-button.text>

<!-- Icon Button (standard) -->
<c-button.icon aria_label="Like">favorite</c-button.icon>

<!-- Icon Button (variants) -->
<c-button.icon variant="filled" aria_label="Like">favorite</c-button.icon>
<c-button.icon variant="tonal" aria_label="Bookmark">bookmark</c-button.icon>
<c-button.icon variant="outlined" aria_label="Search">search</c-button.icon>

<!-- With color variants -->
<c-button.filled color="secondary">Secondary Button</c-button.filled>
<c-button.tonal color="tertiary">Tertiary Tonal</c-button.tonal>
<c-button.elevated color="tertiary">Tertiary Button</c-button.elevated>
<c-button.outlined color="secondary">Secondary Outlined</c-button.outlined>
<c-button.text color="secondary">Secondary Text</c-button.text>
<c-button.icon color="tertiary" aria_label="Settings">settings</c-button.icon>

<!-- With icon -->
<c-button.filled icon="add">Add Item</c-button.filled>
<c-button.tonal icon="edit">Edit Item</c-button.tonal>
<c-button.elevated icon="star">Star Item</c-button.elevated>
<c-button.outlined icon="download">Download Item</c-button.outlined>
<c-button.text icon="link">Link Item</c-button.text>

<!-- Disabled state -->
<c-button.filled disabled>Disabled Button</c-button.filled>
<c-button.tonal disabled>Disabled Tonal</c-button.tonal>
<c-button.elevated disabled>Disabled Elevated</c-button.elevated>
<c-button.outlined disabled>Disabled Outlined</c-button.outlined>
<c-button.text disabled>Disabled Text</c-button.text>
<c-button.icon disabled aria_label="Print">print</c-button.icon>

<!-- With ARIA label for accessibility -->
<c-button.filled icon="favorite" aria_label="Add to favorites">Favorite</c-button.filled>
<c-button.tonal icon="share" aria_label="Share content">Share</c-button.tonal>
<c-button.elevated icon="download" aria_label="Download file">Download</c-button.elevated>
<c-button.outlined icon="settings" aria_label="Open settings">Settings</c-button.outlined>
<c-button.text icon="info" aria_label="More information">Info</c-button.text>

Attributes

Attribute
Type
Default
Description
color string "primary" Button color theme. Options: "primary", "secondary", "tertiary"
size string "medium" FAB size. Options: "small" (40px), "medium" (56px), "large" (96px) (FAB only)
variant string "standard" Icon button variant. Options: "standard", "filled", "tonal", "outlined" (icon buttons only)
icon string none Material icon name to display before the button text (non-icon buttons only)
slot string none For icon and FAB buttons, slot content should be the Material icon name
disabled boolean false When true, the button is disabled and non-interactive
aria_label string none Accessible label for screen readers (required for icon and FAB buttons)
attrs object none Additional HTML attributes to apply to the button element