Skip to content

Latest commit

 

History

History
30 lines (18 loc) · 1.51 KB

button.md

File metadata and controls

30 lines (18 loc) · 1.51 KB

Button

LabButton extends MaterialButton from Material components.

Includes default themes for our design system's button styles. These button styles match the base Material3 button styles.

All configurable attributes are also supported by LabButton. LabButton's styling is built on top of the existing capabilities of MaterialButton itself.

Custom styles

Most likely, any custom button style can be achieved by providing 4 custom values for any button style:

  1. Background color. This can be stateful or fixed.
  2. ShapeAppearance
  3. Ripple color. This can also be stateful.
  4. Stroke size and color.

All these properties are supported in the same way as MaterialButton. Our LabButton uses these values to provide a base design based on our P42 design system. However, any specific configurations are best done by providing custom values for these 4 properties.

Examples can be taken from this project's button style implementations.

Elevation

Our design system buttons don't have elevation and use semi-transparent state colors by default.

When elevation is required, the colors need to become opaque. The elevation shadow will become visible through the button if elevation and transparent colors are used at the same time.