Warning: Received `false` for a non-boolean attribute `alt`

Question

I'm trying to pass the props into a Styled Component button which I configured but it shows the following error:

Warning: Received `false` for a non-boolean attribute `alt`.

This is where I configured my button

const StyledButton = styled.button`
    background-color: ${(props) => (props.alt ? "red" : "white")};
    color: black;
    font: inherit;
    border: 1px solid purple;
    padding: 8px;
    cursor: pointer;

    &:hover {
        background-color: ${(props) => (props.alt ? "salmon" : "lightgreen")};
        color: black;
    }
`;

And this is where I call the button and pass the value to alt (FYI: value of showPerson is boolean):

const Cockpit = (props) => {
    return (
        <div>
            <StyledButton alt={props.showPerson} onClick={() => props.toggle()}>
                Switch Name
            </StyledButton>
        </div>
    );
};

Answer 1

alt is an official HTML attribute name. I know this is a button, not an image, but still best to use a different name for the prop – Jayce444 1 min