دکمه
کاری را در همین صفحه انجام می‌دهد و برچسبش آن کار را می‌گوید.
گونه‌ها و تون‌ها
گونهprimaryactionneutralerrorغیرفعالدر حال انجام
filled
tonal
پیوند این ترکیب را نمی‌سازد
outlined
پیوند این ترکیب را نمی‌سازد
text
پیوند این ترکیب را نمی‌سازد
اندازه‌ها
کوچک
متوسط
بزرگ
خیلی بزرگ
حالت‌ها
گونهعادیهاورفوکوسفشردن
filled
filled، عادی
filled، هاور
filled، فوکوس
filled، فشردن
tonal
tonal، عادی
tonal، هاور
tonal، فوکوس
tonal، فشردن
outlined
outlined، عادی
outlined، هاور
outlined، فوکوس
outlined، فشردن
text
text، عادی
text، هاور
text، فوکوس
text، فشردن
محتوا
آیکون در ابتدا
آیکون در انتها
برچسب بلند
تمام‌عرض
حرکت
حرکت دکمه درجاست: با فشردن کمی جمع می‌شود، در ۲۱۰ میلی‌ثانیه برمی‌گردد و رنگ حالت‌هایش در ۱۵۰ میلی‌ثانیه عوض می‌شود. دکمه‌ای که مدال باز می‌کند، خودش مدال می‌شود.
با تو سفره‌ای رنگ می‌گیرد
با کمک شما بسته غذایی خانواده‌ها کامل‌تر می‌شود و سفره‌شان رنگ می‌گیرد.پیشرفت کمپین۶۸٪ از هدف
با تو سفره‌ای رنگ می‌گیرد
با کمک شما بسته غذایی خانواده‌ها کامل‌تر می‌شود و سفره‌شان رنگ می‌گیرد.پیشرفت کمپین۶۸٪ از هدف
ساختار
ساخته شده از
از هیچ کامپوننت دیگری استفاده نمی‌کند و فقط از توکن‌ها و آیکون‌ها ساخته شده است.
توکن‌ها
- رنگcolor-action, color-error, color-error-container, color-on-action, color-on-error, color-on-error-container, color-on-primary, color-on-primary-container, color-on-surface, color-on-surface-variant, color-outline, color-primary, color-primary-container, color-surface-container-high, color-surface-container-low, color-surface-container-lowest
- تایپوگرافیtypography-label-large-font-family, typography-label-large-font-size, typography-label-large-font-variation-settings, typography-label-large-font-weight, typography-label-large-letter-spacing, typography-label-large-line-height, typography-label-medium-font-size, typography-label-medium-line-height, typography-title-medium-font-size, typography-title-medium-line-height
- فاصلهspace-1, space-2, space-3, space-4, space-5, space-6, space-half
- اندازهsize-control-lg, size-control-md, size-control-sm, size-control-xl, size-icon-in-control-lg, size-icon-in-control-md, size-icon-in-control-sm, size-icon-in-control-xl
- فرم و حاشیهshape-corner-full, shape-corner-md, shape-corner-shape, shape-corner-sm
- سطح و ارتفاعelevation-shadow-level1, elevation-shadow-rim
- حرکتmotion-easing-linear, motion-easing-loop, motion-loop-pulse, motion-loop-spin, motion-scale-press, motion-transition-fade, motion-transition-fade-close, motion-transition-press, motion-transition-small
- فوکوس و حالت‌هاfocus-ring-color-default, focus-ring-offset, focus-ring-width, state-layer-focus, state-layer-hover, state-layer-pressed, state-opacity-disabled-content
به کار رفته در
هنوز هیچ جزء بزرگ‌تری از آن استفاده نمی‌کند.