Skip to content

Instantly share code, notes, and snippets.

// ./components/Button.js
import styled from "styled-components";
const StyledButton = styled.button`
border: 2px solid green;
background-color: green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
const StyledButton = styled.button`
border: 2px solid green;
background-color: ${(props) => (props.variant !== "outline" ? "white" : "green")};
color: ${(props) => (props.variant === "outline" ? "green" : "white")};
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
// components/Button.js
import styled from "styled-components";
const StyledButton = styled.button`
border: 2px solid green;
background-color: ${(props) => (props.variant === "outline" ? "white" : "green")};
color: ${(props) => (props.variant === "outline" ? "green" : "white")};
padding: 15px 32px;
text-align: center;
text-decoration: none;
// components/Button.js
import styled from "styled-components";
const StyledButton = styled.button`
border: 2px solid green;
background-color: ${(props) => (props.variant === "outline" ? "white" : "green")};
color: ${(props) => (props.variant === "outline" ? "green" : "white")};
padding: 15px 32px;
text-align: center;
import styled from "styled-components";
const StyledButton = styled.button`
border: 2px solid green;
background-color: green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
p {
font-size: 2rem;
}
p {
font-size: 1rem;
}
<p>I am paragraph</p>
const redux = require("redux");
const createStore = redux.createStore;
// String constant
const BUY_COFFE = "BUY_COFFE";
// Action creator function
const buyCoffe = () => {
return {
type: BUY_COFFE,
import styled from "styled-components";
const Button = () => {
return (
<StyledButton>Styled Button</StyledButton>
)};
export default Button