Default color theme
PRIMARY
SECONDARY
TERTIARY
Default/
Hover/
Pressed
Primary color theme
PRIMARY
SECONDARY
TERTIARY
Default/
Hover/
Pressed
Hierarchy
Button area behavior
Hierarchy
Left aligned compostions
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan sed lacus eu accumsan. Mauris ut pharetra lectus, sed sodales odio. Maecenas aliquet tincidunt cursus. Fusce varius blandit justo at rhoncus. Suspendisse accumsan nulla vitae velit ornare laoreet. Donec laoreet auctor vulputate. Quisque orci turpis, dapibus semper magna eget, tincidunt hendrerit diam. Nulla et varius tortor. Donec ultricies sem vitae erat porta, sit amet porttitor quam ullamcorper. Nam accumsan lectus quis feugiat sodales.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan sed lacus eu accumsan. Mauris ut pharetra lectus, sed sodales odio. Maecenas aliquet tincidunt cursus. Fusce varius blandit justo at rhoncus. Suspendisse accumsan nulla vitae velit ornare laoreet. Donec laoreet auctor vulputate. Quisque orci turpis, dapibus semper magna eget, tincidunt hendrerit diam. Nulla et varius tortor. Donec ultricies sem vitae erat porta, sit amet porttitor quam ullamcorper. Nam accumsan lectus quis feugiat sodales.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan sed lacus eu accumsan. Mauris ut pharetra lectus, sed sodales odio. Maecenas aliquet tincidunt cursus. Fusce varius blandit justo at rhoncus. Suspendisse accumsan nulla vitae velit ornare laoreet. Donec laoreet auctor vulputate. Quisque orci turpis, dapibus semper magna eget, tincidunt hendrerit diam. Nulla et varius tortor. Donec ultricies sem vitae erat porta, sit amet porttitor quam ullamcorper. Nam accumsan lectus quis feugiat sodales.
Center aligned compostions
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan sed lacus eu accumsan. Mauris ut pharetra lectus, sed sodales odio. Maecenas aliquet tincidunt cursus. Fusce varius blandit justo at rhoncus. Suspendisse accumsan nulla vitae velit ornare laoreet. Donec laoreet auctor vulputate. Quisque orci turpis, dapibus semper magna eget, tincidunt hendrerit diam. Nulla et varius tortor. Donec ultricies sem vitae erat porta, sit amet porttitor quam ullamcorper. Nam accumsan lectus quis feugiat sodales.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan sed lacus eu accumsan. Mauris ut pharetra lectus, sed sodales odio. Maecenas aliquet tincidunt cursus. Fusce varius blandit justo at rhoncus. Suspendisse accumsan nulla vitae velit ornare laoreet. Donec laoreet auctor vulputate. Quisque orci turpis, dapibus semper magna eget, tincidunt hendrerit diam. Nulla et varius tortor. Donec ultricies sem vitae erat porta, sit amet porttitor quam ullamcorper. Nam accumsan lectus quis feugiat sodales.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan sed lacus eu accumsan. Mauris ut pharetra lectus, sed sodales odio. Maecenas aliquet tincidunt cursus. Fusce varius blandit justo at rhoncus. Suspendisse accumsan nulla vitae velit ornare laoreet. Donec laoreet auctor vulputate. Quisque orci turpis, dapibus semper magna eget, tincidunt hendrerit diam. Nulla et varius tortor. Donec ultricies sem vitae erat porta, sit amet porttitor quam ullamcorper. Nam accumsan lectus quis feugiat sodales.
Stretch button scenarios
Sometimes buttons go full width and stack like so