Button
A button with a weight shift on hover, a surface that contracts on press, and a loading state.
Installation
Import from the Reflow workspace package.
Playground
Open demoimport { Button } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Button variant="primary">Save changes</Button>
</>
)
}Variants
import { Button } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete</Button>
</>
)
}With Icons
import { Button } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
const icon = <svg width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 5v14M5 12h14" />
</svg>
return () => (
<>
<Button leadingIcon={icon}>Create</Button>
<Button variant="secondary" trailingIcon={icon}>Next</Button>
<Button size="icon" aria-label="Search">{searchIcon}</Button>
</>
)
}Loading & Disabled
The first button starts a brief loading state when clicked.
import { Button } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Button loading>Loading</Button>
<Button variant="secondary" loading>Saving</Button>
<Button disabled>Disabled</Button>
</>
)
}Sizes
import { Button } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Button>Default</Button>
<Button size="compact">Compact</Button>
</>
)
}API Reference
Public props for the Reflow implementation. Native controls also accept their standard HTML attributes and Remix event mixes.
Button
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | — | Applies the active visual state. |
disabled | boolean | — | Prevents interaction and conveys the disabled state. |
leadingIcon | RemixNode | — | Icon shown before the button label. |
loading | boolean | — | Shows progress and prevents repeated activation. |
size | "default" | "compact" | "icon" | "icon-compact" | — | Control density or icon-button dimensions. |
trailingIcon | RemixNode | — | Icon shown after the button label. |
variant | "primary" | "secondary" | "tertiary" | "ghost" | "destructive" | primary | Visual or layout treatment. |
children | RemixNode | — | Child nodes to render inside the element. |
type | string | — | The `type` HTML attribute. |
href | string | — | Destination URL when rendered as a link. |