Unstyled Button

[coderitual]

This unstyled button component can be used in a variety of scenarios where a completely custom button is required. By definition, having an unstyled button sounds redundant to the css property appearance: none used for native <button> element, but in reality it takes a bit more css to unstyle an element which would work the same in all browsers. I think this is the main reason why devs are more inclined to use div instead, even if they semantically need the button.

Example implementation:

Just an example, need to add our default focus state etc if needed. Probably outline should be set to transparent to support high contrast mode which i believe is covered in style guide focus mixin. The idea is that product teams don't need to maintain all those rule and effectively just have correctly working unstyled button ready for customisation.

unstyled-button {
  all: unset;
  appearance: none;
}

or smth like that:

unstyled-button {
  appearance: none;
  border: 0;
  background: none;
  font-size: inherit;
  font-family: inherit;
  display: inline;
  color: inherit;
  margin:0;
  padding:0;
}

usage:

<Button.Unstyled />

[katarzynatobis]

Closed by #2718