Buttons

Primary, secondary, and soft variants in five sizes.

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.Buttons

<Buttons.button variant="primary" size="md">Primary</Buttons.button>
<Buttons.button variant="secondary">Secondary</Buttons.button>
<Buttons.button variant="soft" phx-click="ping">Soft</Buttons.button>

React (JSX)

import { Button } from "../ui/index.mjs"

<Button variant="primary" size="md">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="soft" onClick={onPing}>Soft</Button>