CSS Parts API Reference

tap-avatar

Name	Description
avatar	The container that wraps the avatar component.
placeholder	The container that wraps the avatar's placeholder.
image	The avatar image. Only shown when the image is present.

tap-avatar::part(avatar) { /* ... */ }
tap-avatar::part(placeholder) { /* ... */ }
tap-avatar::part(image) { /* ... */ }

tap-badge-wrapper

Name	Description
wrapper	The container that wraps the main content and the badge.
badge	The container that positions the badge.

tap-badge-wrapper::part(wrapper) { /* ... */ }
tap-badge-wrapper::part(badge) { /* ... */ }

tap-badge

Name	Description
badge	The main badge element.
icon	The icon inside the badge.

tap-badge::part(badge) { /* ... */ }
tap-badge::part(icon) { /* ... */ }

tap-banner

Name	Description
banner	The main banner element.
content	The content container inside the banner.
action	The action container inside the banner.
extra	The extra slot container inside the hero variant.

tap-banner::part(banner) { /* ... */ }
tap-banner::part(content) { /* ... */ }
tap-banner::part(action) { /* ... */ }
tap-banner::part(extra) { /* ... */ }

tap-bottom-navigation

Name	Description
bottom-navigation	The main container for the bottom navigation bar.

tap-bottom-navigation::part(bottom-navigation) { /* ... */ }

tap-bottom-navigation-item

Name	Description
bottom-navigation-item	The main container for the bottom navigation item.

tap-bottom-navigation-item::part(bottom-navigation-item) { /* ... */ }

tap-bottom-sheet

Name	Description
dimmer	The dimmer element darkens the background and is clickable to close the bottom sheet.
header	The header of the bottom sheet component, containing the title and dismiss button.
body	The container that wraps the bottom sheet's content.

tap-bottom-sheet::part(dimmer) { /* ... */ }
tap-bottom-sheet::part(header) { /* ... */ }
tap-bottom-sheet::part(body) { /* ... */ }

tap-button

Name	Description
button	The button element.

tap-button::part(button) { /* ... */ }

tap-checkbox

Name	Description
checkbox	The main container for the checkbox.

tap-checkbox::part(checkbox) { /* ... */ }

tap-chip

Name	Description
chip	The button element representing the chip.

tap-chip::part(chip) { /* ... */ }

tap-chip-group

Name	Description
chip-group	The main container for the chip group.

tap-chip-group::part(chip-group) { /* ... */ }

tap-divider

Name	Description
divider	The main container for the divider.

tap-divider::part(divider) { /* ... */ }

tap-empty-state

Name	Description
container	The root container of the empty state component a div.
icon	The container of the icon slot, a span.
content	The wrapper around heading and description, a div.
heading	The heading element, a span.
description	The description element, a p.
actions	The container of the actions slot, a div.

tap-empty-state::part(container) { /* ... */ }
tap-empty-state::part(icon) { /* ... */ }
tap-empty-state::part(content) { /* ... */ }
tap-empty-state::part(heading) { /* ... */ }
tap-empty-state::part(description) { /* ... */ }
tap-empty-state::part(actions) { /* ... */ }

tap-icon-button

Name	Description
button	The button element.

tap-icon-button::part(button) { /* ... */ }

tap-modal

Name	Description
overlay	The overlay background when the modal is open.
dialog	The main container for the modal dialog.
image-container	The container of the image element, a div.
image	The image element, a img.
icon	The container of the icon slot, a div.
content	The wrapper around title and description, a div.
title	The title element, a span.
description	The description element, a p.
actions	The container of the actions slot, a div.

tap-modal::part(overlay) { /* ... */ }
tap-modal::part(dialog) { /* ... */ }
tap-modal::part(image-container) { /* ... */ }
tap-modal::part(image) { /* ... */ }
tap-modal::part(icon) { /* ... */ }
tap-modal::part(content) { /* ... */ }
tap-modal::part(title) { /* ... */ }
tap-modal::part(description) { /* ... */ }
tap-modal::part(actions) { /* ... */ }

tap-notice

Name	Description
notice	The root container of the notice component a div.
icon	The container of the icon, a span.
content-root	The wrapper around title, message and actions, a div.
message	The message element, a p.
title	The title element, a p.
actions	The actions slot, a slot.
dismiss	The dismiss button, a button.

tap-notice::part(notice) { /* ... */ }
tap-notice::part(icon) { /* ... */ }
tap-notice::part(content-root) { /* ... */ }
tap-notice::part(message) { /* ... */ }
tap-notice::part(title) { /* ... */ }
tap-notice::part(actions) { /* ... */ }
tap-notice::part(dismiss) { /* ... */ }

tap-pinwheel

Name	Description
pinwheel	The container that wraps the pinwheel component.
pinwheel-item	The item that rendered in pinwheel.

tap-pinwheel::part(pinwheel) { /* ... */ }
tap-pinwheel::part(pinwheel-item) { /* ... */ }

tap-pinwheel-group

Name	Description
pinwheel-group	The container that wraps the pinwheels.
pinwheel-selector-indicator	The selector indicator that wraps selected row.

tap-pinwheel-group::part(pinwheel-group) { /* ... */ }
tap-pinwheel-group::part(pinwheel-selector-indicator) { /* ... */ }

tap-progress-indicator

Name	Description
progressbar	The container for the progress bar.
step	Each individual step in the progress bar.

tap-progress-indicator::part(progressbar) { /* ... */ }
tap-progress-indicator::part(step) { /* ... */ }

tap-radio

Name	Description
radio	The main container for the radio button.

tap-radio::part(radio) { /* ... */ }

tap-radio-group

Name	Description
radio-group	The main container for the radio group.

tap-radio-group::part(radio-group) { /* ... */ }

tap-row

Name	Description
row	The main container for the row.
leading	The container for the leading slot.
content	The container for the content slot.
trailing	The container for the trailing slot.
navigable	The container for the navigable icon.

tap-row::part(row) { /* ... */ }
tap-row::part(leading) { /* ... */ }
tap-row::part(content) { /* ... */ }
tap-row::part(trailing) { /* ... */ }
tap-row::part(navigable) { /* ... */ }

tap-segmented-button

Name	Description
button	The main container for the button.

tap-segmented-button::part(button) { /* ... */ }

tap-segmented-button-group

Name	Description
button-group	The main container for the button group.

tap-segmented-button-group::part(button-group) { /* ... */ }

tap-skeleton

Name	Description
skeleton	The skeleton element

tap-skeleton::part(skeleton) { /* ... */ }

tap-spinner

Name	Description
svg	The svg tag that represents spinner component.

tap-spinner::part(`svg`) { /* ... */ }

tap-step-indicator

Name	Description
steps	The container for the steps.
step	Each individual step.

tap-step-indicator::part(steps) { /* ... */ }
tap-step-indicator::part(step) { /* ... */ }

tap-stepper

Name	Description
stepper	The container that wraps the stepper component.
decrease-button	The button that contains minus icon and decrease the value.
increase-button	The button that contains plus icon and increases the value.
value	The p tag that shows the value.
unit	The p tag that shows the unit and will be hidden if unit not exists.

tap-stepper::part(stepper) { /* ... */ }
tap-stepper::part(decrease-button) { /* ... */ }
tap-stepper::part(increase-button) { /* ... */ }
tap-stepper::part(value) { /* ... */ }
tap-stepper::part(unit) { /* ... */ }

tap-switch

Name	Description
switch	The container that wraps the switch component.
input	The input element that represents the switch's toggle functionality.
slider	The slider element that visually represents the switch's state.

tap-switch::part(switch) { /* ... */ }
tap-switch::part(input) { /* ... */ }
tap-switch::part(slider) { /* ... */ }

tap-text-field

Name	Description
field	The main container for the text field.
label	The label for the text field.
container	The container for the input and any leading/trailing elements.
input	The input element.
caption	The caption for the text field.
leading	The leading for the text field.
trailing	The trailing for the text field.

tap-text-field::part(field) { /* ... */ }
tap-text-field::part(label) { /* ... */ }
tap-text-field::part(container) { /* ... */ }
tap-text-field::part(input) { /* ... */ }
tap-text-field::part(caption) { /* ... */ }
tap-text-field::part(leading) { /* ... */ }
tap-text-field::part(trailing) { /* ... */ }

tap-textarea

Name	Description
field	The main container for the textarea.
label	The label for the input.
container	The container for the input.
input	The input element.
caption	The caption for the textarea.

tap-textarea::part(field) { /* ... */ }
tap-textarea::part(label) { /* ... */ }
tap-textarea::part(container) { /* ... */ }
tap-textarea::part(input) { /* ... */ }
tap-textarea::part(caption) { /* ... */ }

tap-toast

Name	Description
toast	The main container for the toast notification.
icon	The container for the icon.
message	The container for the message.
dismiss	The container for the dismiss button.

tap-toast::part(toast) { /* ... */ }
tap-toast::part(icon) { /* ... */ }
tap-toast::part(message) { /* ... */ }
tap-toast::part(dismiss) { /* ... */ }