Buttons
Button components for actions and interactions. Available in multiple sizes, variants, and states.
Buttons
Button components built on shadcn/ui with Renewables styling applied. Use the toggles to preview different sizes and background contexts.
Primary Button
Filled button for main call-to-action
Usage
<Button>label</Button>
<Button size="lg">label</Button>Primary Button + Icon
Primary button with trailing icon
Usage
<Button>
label
<DownloadIcon />
</Button>Primary Icon Button
Icon-only primary button
Usage
<Button size="icon">
<DownloadIcon />
</Button>Secondary Button
Outlined button for secondary actions
Usage
<Button variant="outline">label</Button>
<Button variant="outline" size="lg">label</Button>Secondary Button + Icon
Outlined button with trailing icon
Usage
<Button variant="outline">
label
<DownloadIcon />
</Button>Secondary Icon Button
Icon-only outlined button
Usage
<Button variant="outline" size="icon">
<DownloadIcon />
</Button>