Sizes

This doc tracks important size metrics for petal-elements.

Sizes are tracked in bundles. A bundle is a single .js file for one or more components that includes all of the JavaScript and CSS needed, minus external dependencies. We track three metrics:

gzip - minified and compressed. This impacts download size, which can take longer over slow networks.
minified - minified and unpacked. This impacts the time it takes a page to be interactive, which can take longer on some devices.
% CSS - the amount of CSS compared to JavaScript. The bundle includes both JS and CSS, so this helps track changes to JS logic and CSS styles separately.

_{Last updated 2026-10-09.}

Component	gzip	minified	% CSS	Import
All	76.7kb	490.3kb	64% CSS	`petal-elements/all.js`
Common	56.6kb	306.6kb	52% CSS	`petal-elements/common.js`
Button	11.0kb	66.5kb	67% CSS
	9.2kb	41.0kb	53% CSS	`petal-elements/button/elevated-button.js`
	9.2kb	41.1kb	53% CSS	`petal-elements/button/filled-button.js`
	9.2kb	41.5kb	54% CSS	`petal-elements/button/filled-tonal-button.js`
	9.0kb	39.9kb	54% CSS	`petal-elements/button/outlined-button.js`
	8.6kb	36.2kb	49% CSS	`petal-elements/button/text-button.js`
Button group	7.7kb	29.4kb	29% CSS	`petal-elements/buttongroup/button-group.js`
Checkbox	7.1kb	27.7kb	36% CSS	`petal-elements/checkbox/checkbox.js`
Chips	11.0kb	65.0kb	60% CSS
	5.2kb	18.1kb	20% CSS	`petal-elements/chips/chip-set.js`
	7.2kb	30.0kb	47% CSS	`petal-elements/chips/assist-chip.js`
	8.5kb	39.4kb	52% CSS	`petal-elements/chips/filter-chip.js`
	8.2kb	36.8kb	50% CSS	`petal-elements/chips/input-chip.js`
	7.2kb	30.3kb	47% CSS	`petal-elements/chips/suggestion-chip.js`
Dialog	5.1kb	17.4kb	27% CSS	`petal-elements/dialog/dialog.js`
Divider	0.6kb	1.4kb	31% CSS	`petal-elements/divider/divider.js`
Elevation	0.7kb	1.8kb	58% CSS	`petal-elements/elevation/elevation.js`
Fab	7.6kb	42.0kb	67% CSS
	7.2kb	37.4kb	64% CSS	`petal-elements/fab/fab.js`
	6.2kb	26.5kb	49% CSS	`petal-elements/fab/branded-fab.js`
Field	6.2kb	41.8kb	82% CSS
	4.8kb	25.7kb	74% CSS	`petal-elements/field/filled-field.js`
	5.1kb	27.8kb	75% CSS	`petal-elements/field/outlined-field.js`
Focus	1.6kb	5.5kb	48% CSS	`petal-elements/focus/md-focus-ring.js`
Icon	0.7kb	1.4kb	44% CSS	`petal-elements/icon/icon.js`
Icon button	8.6kb	48.1kb	60% CSS
	7.1kb	27.6kb	36% CSS	`petal-elements/iconbutton/icon-button.js`
	7.2kb	29.8kb	40% CSS	`petal-elements/iconbutton/filled-icon-button.js`
	7.3kb	30.3kb	41% CSS	`petal-elements/iconbutton/filled-tonal-icon-button.js`
	7.3kb	29.3kb	39% CSS	`petal-elements/iconbutton/outlined-icon-button.js`
List	7.6kb	30.0kb	31% CSS
	1.7kb	4.9kb	4% CSS	`petal-elements/list/list.js`
	6.5kb	25.4kb	37% CSS	`petal-elements/list/list-item.js`
Menu	14.5kb	58.1kb	21% CSS
	8.3kb	30.8kb	17% CSS	`petal-elements/menu/menu.js`
	7.2kb	28.1kb	34% CSS	`petal-elements/menu/menu-item.js`
	8.7kb	33.7kb	11% CSS	`petal-elements/menu/sub-menu.js`
Progress	3.9kb	15.0kb	64% CSS
	3.0kb	9.7kb	56% CSS	`petal-elements/progress/linear-progress.js`
	2.6kb	8.4kb	50% CSS	`petal-elements/progress/circular-progress.js`
Radio	6.7kb	24.8kb	27% CSS	`petal-elements/radio/radio.js`
Ripple	2.7kb	7.8kb	13% CSS	`petal-elements/ripple/ripple.js`
Select	26.8kb	148.8kb	56% CSS
	19.0kb	94.7kb	46% CSS	`petal-elements/select/filled-select.js`
	19.1kb	95.2kb	46% CSS	`petal-elements/select/outlined-select.js`
	7.0kb	28.3kb	34% CSS	`petal-elements/select/select-option.js`
Slider	10.0kb	43.7kb	44% CSS	`petal-elements/slider/slider.js`
Switch	8.1kb	34.0kb	44% CSS	`petal-elements/switch/switch.js`
Tabs	7.8kb	36.1kb	49% CSS
	6.2kb	22.6kb	24% CSS	`petal-elements/tabs/tabs.js`
	6.2kb	26.1kb	48% CSS	`petal-elements/tabs/primary-tab.js`
	6.1kb	25.7kb	47% CSS	`petal-elements/tabs/secondary-tab.js`
Text field	14.8kb	98.0kb	72% CSS
	11.6kb	64.6kb	61% CSS	`petal-elements/textfield/filled-text-field.js`
	11.8kb	65.0kb	61% CSS	`petal-elements/textfield/outlined-text-field.js`