Shape

The corner scale as rounded-corner-*, and M3 Expressive's shapes as <x-shape name="…" />.

When to use which: full for buttons, icon buttons, chips' avatars, badges, switches, sliders, the search bar and navigation indicators; xs for text fields, menus, snackbars and plain tooltips; sm for chips; md for cards and rich tooltips; lg for the FAB and a side sheet's inner corners; xl for dialogs, bottom sheets, pickers and carousel items; xxl for hero containers. A nested corner is the outer radius minus the padding. A press squares a round shape; nothing morphs on hover. The shapes below are decoration, never meaning.

@foreach (['rounded-corner-none', 'rounded-corner-xs', 'rounded-corner-sm', 'rounded-corner-md', 'rounded-corner-lg', 'rounded-corner-lg-increased', 'rounded-corner-xl', 'rounded-corner-xl-increased', 'rounded-corner-xxl', 'rounded-corner-full'] as $corner)

{{ $corner }}

@endforeach

@foreach (\NoNameWeb\LivewireMaterial\Support\SvgFile::shapeNames() as $shape)

{{ $shape }}

@endforeach