Initial commit

Created from https://vercel.com/new

components/common/Button.module.css

@@ -0,0 +1,102 @@
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--font-size-normal);
+  color: var(--gray900);
+  background: var(--gray100);
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+}
+
+.button:hover {
+  background: var(--gray200);
+}
+
+.button:active {
+  color: var(--gray900);
+}
+
+.label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 300px;
+}
+
+.large {
+  font-size: var(--font-size-large);
+}
+
+.small {
+  font-size: var(--font-size-small);
+}
+
+.xsmall {
+  font-size: var(--font-size-xsmall);
+}
+
+.action,
+.action:active {
+  color: var(--gray50);
+  background: var(--gray900);
+}
+
+.action:hover {
+  background: var(--gray800);
+}
+
+.danger,
+.danger:active {
+  color: var(--gray50);
+  background: var(--red500);
+}
+
+.danger:hover {
+  background: var(--red400);
+}
+
+.light,
+.light:active {
+  color: var(--gray900);
+  background: transparent;
+}
+
+.light:hover {
+  background: inherit;
+}
+
+.button .icon + * {
+  margin-left: 10px;
+}
+
+.button.iconRight .icon {
+  order: 1;
+  margin-left: 10px;
+}
+
+.button.iconRight .icon + * {
+  margin: 0;
+}
+
+.button:disabled {
+  cursor: default;
+  color: var(--gray500);
+  background: var(--gray75);
+}
+
+.button:disabled:active {
+  color: var(--gray500);
+}
+
+.button:disabled:hover {
+  background: var(--gray75);
+}
+
+.button.light:disabled {
+  background: var(--gray50);
+}