Edited button component

This commit is contained in:
Patrick Alvin Alcala 2025-08-26 16:23:47 +08:00
parent 3905923985
commit d0652e52a5
2 changed files with 20 additions and 17 deletions

View file

@ -4,13 +4,13 @@
.button
background: vars.$primaryColor
border: none
border-radius: 16px
border-radius: 32px
color: white
padding: 0.5rem 1.25rem
text-align: center
text-decoration: none
display: inline-block
font-size: 0.75rem
font-size: 1rem
font-weight: 700
cursor: pointer
transition: all 0.2s ease-out

View file

@ -2,22 +2,25 @@ import './Button.sass'
import { Show } from 'solid-js'
interface Props {
label?: string;
to?: string;
onClick?: () => void;
label?: string
to?: string
onClick?: () => void
}
export default (props: Props) => {
return
<>
<Show when={props.to}>
<a href={props.to} aria-label={props.label}>
<button class="button">{props.label || 'Click Me!'}</button>
</a>
</Show>
return (
<>
<Show when={props.to}>
<a href={props.to} aria-label={props.label}>
<button class="button">{props.label || 'Click Me!'}</button>
</a>
</Show>
<Show when={!props.to}>
<button class="button" onClick={props.onClick}>{props.label || 'Click Me!'}</button>
</Show>
</>
}
<Show when={!props.to}>
<button class="button" onClick={props.onClick}>
{props.label || 'Click Me!'}
</button>
</Show>
</>
)
}