Extend a styled component as a different HTML element

Button.styled.ts

import styled from 'styled-components';

interface ButtonProps {
    // Props to be used for styling below
}

export const StyledButton = styled.button<ButtonProps>`
	// Styles
	
	&:hover, &:focus, &:active {
       // Styles
	};
`;

ButtonLink.styled.ts

import styled from 'styled-components';
import { StyledButton } from '../Button/Button.styled';

interface ButtonLinkProps {
	href: string; 
}

export const StyledButtonLink = styled(StyledButton).attrs({ as: 'a' })<ButtonLinkProps>`
	// styles
`;