I’m working on a project using Astro and I’m trying to create a reusable button component that allows for extending styles using class props. My goal is to pass custom styles to the button while maintaining its default styles. Here’s what I have so far:
---
const {
onClick = () => {},
type = "button",
variant = "primary",
size = "md",
class: className = "",
} = Astro.props;
---
<button
type={type}
onclick={onClick}
class={`btn ${variant} ${size} ${className}`}>
<slot />
</button>
<style>
.btn {
cursor: pointer;
border-radius: 6px;
transition-property: all;
transition: 0.2s;
box-shadow: 0 1px 3px hsla(0,0%,0%,.2);
width: max-content;
max-width: 100%;
}
.btn:active {
transform: scale(0.95);
}
/* Size variants */
.btn.md {
padding: 12px 16px;
font-size: 16px;
}
.btn.lg {
padding: 15px 30px;
font-size: 20px;
}
/* Color variants */
.btn.primary {
background-color: var(--primary);
color: white;
}
.btn.primary:hover {
background-color: var(--primary-hover);
}
.btn.secondary {
background-color: var(--secondary);
color: white;
}
.btn.secondary:hover {
background-color: #var(--secondary-hover);
}
</style>
<Button variant="secondary" class="test" >example</Button>
<style>
.test{
background-color: red;
}
<style/>
In this case the .test is not doing any effect
extend styles of a reusable button component
New contributor