React Router > React Button Outline Variant

Mission Page: Button Outline Variant

Here we've added a variant of outline to the button so that the Edit / Delete buttons can be a little more sublte and not distract from the rest of the mission. Go to Missions -> click on a mission to see the outlined buttons. We've highlighted Button.js, where you can see the new variantStyles that is just an object containing css that can be used to be injected into the main Button styles.

In Mission.js, we use variant="outline" as a prop in the Button to get the new styles.

Lesson 23/26

import styled, { css } from "styled-components";
import colors from "../styles/colors";
const { WHITE, BLACK } = colors;

const variantStyles = {
  outline: css`
    background-color: ${WHITE};
    color: ${BLACK};
    border: 1px solid ${BLACK};
  `,
};

const Button = styled.button`
  background-color: ${BLACK};
  color: ${WHITE};
  padding: 8px 15px;
  font-family: inherit;
  font-weight: 400;
  font-size: 20px;
  outline: 0;
  border: 0;
  margin: 10px 0px;
  cursor: pointer;
  max-height: 40px;
  box-shadow: 0px 2px 2px lightgray;
  transition: ease background-color 250ms;
  &:hover {
    opacity: 80%;
  }
  &:disabled {
    cursor: default;
    opacity: 0.7;
  }

  ${({ variant }) => variant && variantStyles[variant]}
`;

export default Button;

Open Sandbox