Button
The pill-shaped button from hackclub.com. It's dark by default, but turns red on hover. Set href to render a link, and arrow for the arrow that nudges on hover, as shown below.
<hc-button arrow>Join the community</hc-button>
<hc-button variant="red">Start a club</hc-button>
<hc-button variant="secondary">Learn more</hc-button>
<hc-button variant="outline">Donate</hc-button>
<hc-button variant="ghost">Cancel</hc-button><hc-button size="sm">Small</hc-button>
<hc-button>Medium</hc-button>
<hc-button size="lg" arrow>Large</hc-button>
<hc-button href="https://github.com/hackclub" target="_blank" variant="secondary">
<hc-icon slot="start" glyph="github" size="24"></hc-icon>
GitHub
</hc-button>
<hc-button disabled>Disabled</hc-button>API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "red" | "secondary" | "outline" | "ghost" | "primary" | Visual style |
size | "sm" | "md" | "lg" | "md" | Height and padding |
href | string | Renders an <a> instead of a <button> | |
target, rel, download | string | Passed to the link. rel defaults to noopener noreferrer for _blank | |
type | "submit" | "reset" | "button" | "submit" | Form behavior |
arrow | boolean | false | Show the trailing arrow |
disabled | boolean | false | Disable the button |
Slots
| Name | Description |
|---|---|
(default) | Label |
start | Before the label, e.g. an <hc-icon> |
end | After the label; replaces the arrow |
CSS parts
| Name | Description |
|---|---|
control | The inner <a> or <button> |
arrow | The arrow wrapper |
CSS custom properties
| Name | Description |
|---|---|
--hc-button-bg / --hc-button-fg | Resting colors |
--hc-button-bg-hover / --hc-button-fg-hover | Hover colors |
--hc-button-height, --hc-button-padding, --hc-button-font-size | Sizing |