Sections
Components
- AlertBanner
- AlertDialog
- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- CalendarIcon
- CellLayout
- CellLink
- Checkbox
- Collapse
- ContentSwitcher
- ControlLabel
- DatePicker
- Dialog
- Divider
- Drawer
- EmptyCell
- EmptyState
- Empty
- ErrorOverlay
- FilterBar
- FilterChips
- Flex
- GridLayout
- HumanisedDate
- Icon
- InputDuration
- InputField
- Input
- Label
- Loader
- MoreActions
- NumberInput
- OutsideClickHandler
- PageLoader
- Page
- Popconfirm
- Popover
- ProgressPie
- Progress
- RadioButtonGroup
- RadioGroup
- Radio
- RelativeTime
- Resizable
- SearchInput
- Select
- SkeletonText
- Skeleton
- Space
- SquadAvatarList
- StatusPicker
- Stepper
- Switch
- TableLight
- Tabs
- Tag
- Text
- Textarea
- Toast
- Tooltip
- TriggerSelect
- Upload
import { Button } from "@/rl-ui";
<Button variant="primary">Save</Button>Examples#
Variants#
import { Button } from "@/rl-ui";
<>
<Button variant="primary">primary</Button>
<Button variant="secondary">secondary</Button>
<Button variant="ghost">ghost</Button>
<Button variant="link">link</Button>
<Button variant="success">success</Button>
<Button variant="danger">danger</Button>
<Button variant="successSecondary">successSecondary</Button>
<Button variant="dangerSecondary">dangerSecondary</Button>
<Button variant="tertiary">tertiary</Button>
</>AI, icon & minimal#
import { Button } from "@/rl-ui";
<>
<Button variant="ai">AI</Button>
<Button variant="aiSecondary">AI secondary</Button>
<Button variant="minimal">Minimal</Button>
<Button variant="icon" aria-label="More">···</Button>
</>Sizes#
import { Button } from "@/rl-ui";
<>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
</>Primary × size#
import { Button } from "@/rl-ui";
<>
<Button variant="primary" size="small">Small</Button>
<Button variant="primary" size="medium">Medium</Button>
<Button variant="primary" size="large">Large</Button>
</>Loading#
import { Button } from "@/rl-ui";
<>
<Button variant="primary" loading>Saving</Button>
<Button variant="secondary" loading>Loading</Button>
<Button variant="danger" loading>Deleting</Button>
</>Disabled#
import { Button } from "@/rl-ui";
<>
<Button variant="primary" disabled>Disabled</Button>
<Button variant="secondary" disabled>Disabled</Button>
<Button variant="ghost" disabled>Disabled</Button>
</>API#
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "ghost" | "link" | "success" | "danger" | "icon" | "minimal" | "successSecondary" | "dangerSecondary" | "tertiary" | "ai" | "aiSecondary" | "secondary" | Visual style. |
size | "small" | "medium" | "large" | "medium" | Control height. |
disabled | boolean | false | Prevents interaction. |
loading | boolean | false | Shows a spinner and disables the button. |
leftIcon | ReactNode | — | Icon before the label. |
rightIcon | ReactNode | — | Icon after the label. |
asChild | boolean | false | Merge props onto the child element. |
type | "button" | "submit" | "reset" | "button" | Native button type. |