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 { Space, Text } from "@/rl-ui";
<Space size="medium" direction="vertical">
<Text variant="heading-03">Title</Text>
<Text variant="body-short-01">Supporting copy</Text>
</Space>Examples#
Sizes (horizontal)#
import { Space, Badge } from "@/rl-ui";
<>
<Space size="small"><Badge color="blue">A</Badge><Badge color="green">B</Badge></Space>
<Space size="large"><Badge color="blue">A</Badge><Badge color="green">B</Badge></Space>
</>API#
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "horizontal" | "vertical" | "horizontal" | Stack axis. |
size | "small" | "medium" | "large" | number | "small" | Gap size. |
align | "start" | "end" | "center" | "baseline" | — | Cross-axis alignment. |
wrap | boolean | false | Allow wrapping. |
block | boolean | false | Stretch to full width. |