styled.button.attrs(props => ({ className: classNames({ 'plain-button': true, 'flex-inline flex--v-center': true, [font('hnl', 3)]: true, }), }))
const cockpit = props => { const StyledButton = styled.button` //creating a styled button using styled-components background-color: ${props => props.alt ? "red": "green"}; &:hover { background-color: ${props => props.alt ? "salmon": "lightGreen"}; color: black; } `; const classes= []; if(props.persons.length <=2){ classes.push("red"); //classes=["red"] } if(props.persons.length <=1){ classes.push(" bold"); //classes=["red", "bold"]; } return ( <div> <h1 >Hi yash!!</h1> <p className={classes.join('')}>This is working</p> <StyledButton alt={props.showPersons} onClick={props.clicked}>Toggle Person</StyledButton> </div> ) }
styled.button.attrs(props => ({ /* Here we can set the traditional HTML tag`s properties */ type: 'submit', disabled: props.loading, }))
styled.button.attrs(props => ({ type: 'submit', disabled: props.isLoading, }))
styled.button.attrs(props => ({ tabIndex: props.isFocusable ? 0 : -1, }))
styled.button.attrs(props => ({ type:props.type, }))
styled.button.attrs(({ disabled, submitting }) => ({ type: 'submit', disabled: disabled || submitting }))
styled.button.attrs(props => ({ className: classNames({ 'plain-button': true, flex: true, 'flex--v-center': true, [font('hnm', 5)]: true, }), }))
styled.button.attrs(props => ({ className: classNames({ 'btn relative flex flex--v-center': true, [font('hnm', 5)]: true, }), }))
styled.button.attrs((props) => ({ type: "submit", disabled: props.loading, }))
styled.button.attrs(props => ({ type: 'submit', disabled: props.loading, }))
styled.button.attrs(({ loading, disabled }) => ({ type: 'submit', disabled: loading || disabled, }))