Loading...
Installation
Usage
import { Button } from "@/components/ui/button"
export default function App() {
return <Button>Click me</Button>
Getting Started
A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation. A common convention for informing users that a button launches a dialog is to append "…" (ellipsis) to the button label, e.g., "Save as…".
import { Button } from "@/components/ui/button"
export default function App() {
return <Button>Click me</Button>
The button component automatically controls icon sizes based on button size. Supports icon-only buttons, buttons with left/right icons, and buttons with both icons.
The fill variant is the primary button style with a solid background. It supports all sizes and states including default, hover, focus, loading, and disabled.
The fill destructive variant uses the error color scheme for destructive actions like delete or remove.
The fill warning variant uses the warning color scheme for warning actions that require user attention.
The fill success variant uses the success color scheme for positive actions like confirm or save.
The fill iris variant uses the iris color scheme for special branded actions.
The line variant is an outlined button style with a border and transparent background. It supports all sizes and states including default, hover, focus, loading, and disabled.
The line destructive variant uses the error color scheme for destructive actions with an outlined style.
The line warning variant uses the warning color scheme for warning actions with an outlined style.
The line success variant uses the success color scheme for positive actions with an outlined style.
The line iris variant uses the iris color scheme for special branded actions with an outlined style.
The text variant is a minimal button style with no background or border, displaying only text. It supports all sizes and states including default, hover, focus, loading, and disabled.
The text destructive variant uses the error color scheme for destructive actions with a minimal text-only style.
The text warning variant uses the warning color scheme for warning actions with a minimal text-only style.
The text success variant uses the success color scheme for positive actions with a minimal text-only style.
The text iris variant uses the iris color scheme for special branded actions with a minimal text-only style.
The button component follows a consistent sizing system with detailed specifications for each size variant.
The Button component accepts all standard button HTML attributes plus:
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | fill / line / text | fill | No | The visual style of the button |
size | xxs / xs / s / r / m / l / xl / xxl | r | No | The size of the button |
colorScheme | default / destructive / warning / success / iris | default | No | The color scheme for semantic variants |
loading | boolean | false | No | Shows a loading spinner and disables interaction |
disabled | boolean | false | No | Disables the button |
icon | ReactNode | - | No | Icon for icon-only buttons. Icon size is automatically controlled (xxs: 12px, xs-m: 14px, l-xxl: 16px) |
leftIcon | ReactNode | - | No | Icon to display on the left side. Icon size is automatically controlled |
rightIcon | ReactNode | - | No | Icon to display on the right side. Icon size is automatically controlled |
iconOnly | boolean | false | No | Whether the button contains only an icon (makes button square) |
fullWidth | boolean | false | No | Whether the button should take full width |
| size | icon-size | font-size | font-padding | radius | button-padding |
|---|---|---|---|---|---|
| 20-XXS | 12 | 14 | 2 | 5 | 4 |
| 24-XS | 14 | 14 | 2 | 6 | 6 |
| 28-S | 14 |
| 14 |
| 2 |
| 7 |
| 8 |
| 32-R | 14 | 14 | 2 | 8 | 10 |
| 36-M | 14 | 14 | 2 | 9 | 12 |
| 40-L | 16 | 16 | 4 | 10 | 14 |
| 44-XL | 16 | 16 | 4 | 11 | 16 |
| 48-XXL | 16 | 16 | 4 | 12 | 18 |
import { Button } from '@/registry/basic-ui/button';
import { HomeIcon } from 'lucide-react';
export function ButtonDemo() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* size preview */}
<div className="flex flex-wrap items-center gap-(--gap-6)">
<Button variant="fill" size="xxl">
xxl
</Button>
<Button variant="fill" size="xl">
xl
</Button>
<Button variant="fill" size="l">
l
</Button>
<Button variant="fill" size="m">
m
</Button>
<Button variant="fill" size="r">
r
</Button>
<Button variant="fill" size="s">
s
</Button>
<Button variant="fill" size="xs">
xs
</Button>
<Button variant="fill" size="xxs">
xxs
</Button>
</div>
{/* color scheme preview */}
<div className="flex flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="default">
fill default
</Button>
<Button variant="fill" colorScheme="destructive">
fill destructive
</Button>
<Button variant="fill" colorScheme="warning">
fill warning
</Button>
<Button variant="fill" colorScheme="success">
fill success
</Button>
<Button variant="fill" colorScheme="iris">
fill iris
</Button>
</div>
{/* color scheme preview */}
<div className="flex flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="default">
text default
</Button>
<Button variant="text" colorScheme="destructive">
text destructive
</Button>
<Button variant="text" colorScheme="warning">
text warning
</Button>
<Button variant="text" colorScheme="success">
text success
</Button>
<Button variant="text" colorScheme="iris">
text iris
</Button>
</div>
{/* color scheme preview */}
<div className="flex flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="default">
line default
</Button>
<Button variant="line" colorScheme="destructive">
line destructive
</Button>
<Button variant="line" colorScheme="warning">
line warning
</Button>
<Button variant="line" colorScheme="success">
line success
</Button>
<Button variant="line" colorScheme="iris">
line iris
</Button>
</div>
{/* loading preview */}
<div className="flex flex-wrap gap-(--gap-6)">
<Button variant="fill" loading>
Fill Loading
</Button>
<Button variant="line" loading>
Line Loading
</Button>
<Button variant="text" loading>
Text Loading
</Button>
<Button variant="text" colorScheme="default" loading>
Text Default Loading
</Button>
<Button variant="text" colorScheme="destructive" loading>
Text Destructive Loading
</Button>
<Button variant="text" colorScheme="success" loading>
Text Success Loading
</Button>
<Button variant="text" colorScheme="warning" loading>
Text Warning Loading
</Button>
<Button variant="text" colorScheme="iris" loading>
Text Iris Loading
</Button>
</div>
{/* icon preview */}
<div className="flex flex-wrap gap-(--gap-6)">
<Button
variant="fill"
colorScheme="default"
icon={<HomeIcon />}
iconOnly
></Button>
<Button
variant="fill"
colorScheme="destructive"
icon={<HomeIcon />}
iconOnly
></Button>
<Button
variant="fill"
colorScheme="warning"
icon={<HomeIcon />}
iconOnly
></Button>
<Button
variant="fill"
colorScheme="success"
icon={<HomeIcon />}
iconOnly
></Button>
</div>
{/* disabled & focus preview */}
<div className="flex flex-wrap gap-(--gap-6)">
<Button variant="fill" size="xxl" disabled>
Disabled
</Button>
<Button variant="fill" size="xxl" className="ring-2 ring-(--blue-9)">
Focus
</Button>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
// Simple icon components for demonstration
const SearchIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
);
const PlusIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
);
const HeartIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
</svg>
);
const DeleteIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12.0342 1C12.5364 1 12.9789 0.999246 13.3477 1.03223C13.7349 1.06689 14.114 1.1433 14.4873 1.33692C14.6313 1.41162 14.7694 1.49778 14.8994 1.59473C15.2367 1.8463 15.4717 2.15478 15.6719 2.48829C15.8623 2.80563 16.0535 3.20366 16.2725 3.65528L16.6826 4.5H21C21.5523 4.5 22 4.94772 22 5.5C22 6.05229 21.5523 6.5 21 6.5H20.4404L19.8779 15.5869C19.8 16.8481 19.7385 17.865 19.6094 18.6787C19.4778 19.5082 19.2634 20.2252 18.8213 20.8594C18.4245 21.4284 17.9137 21.9096 17.3213 22.2705C16.6608 22.6729 15.9311 22.8427 15.0947 22.9229C14.2747 23.0014 13.2565 23 11.9932 23C10.7279 23 9.70782 23.0006 8.88672 22.9219C8.04942 22.8416 7.31915 22.6717 6.6582 22.2686C6.06559 21.9071 5.55477 21.4262 5.1582 20.8564C4.71598 20.221 4.50173 19.5018 4.37109 18.6709C4.24303 17.8561 4.18268 16.838 4.10645 15.5752L3.55859 6.5H3C2.44772 6.5 2 6.05229 2 5.5C2 4.94772 2.44772 4.5 3 4.5H7.41016L7.74902 3.75684C7.96258 3.28834 8.14922 2.87585 8.33691 2.54688C8.53396 2.20153 8.76718 1.88198 9.1084 1.62012C9.23993 1.51922 9.38 1.42939 9.52637 1.35157C9.90615 1.14963 10.2935 1.06929 10.6895 1.03321C11.0666 0.998877 11.5194 1 12.0342 1ZM6.10254 15.4551C6.18111 16.7567 6.23696 17.6623 6.34668 18.3604C6.45392 19.0425 6.60022 19.4271 6.7998 19.7139C7.03776 20.0557 7.34461 20.3446 7.7002 20.5615C7.99839 20.7433 8.39038 20.8657 9.07715 20.9316C9.78065 20.9991 10.6889 21 11.9932 21C13.2955 21 14.2018 20.999 14.9043 20.9316C15.5904 20.8659 15.9822 20.744 16.2803 20.5625C16.6357 20.346 16.9426 20.0572 17.1807 19.7158C17.3803 19.4295 17.5258 19.046 17.6338 18.3652C17.7444 17.6682 17.8015 16.7637 17.8818 15.4639L18.4365 6.5H5.5625L6.10254 15.4551ZM8.5 16.5V10.5C8.5 9.94772 8.94772 9.5 9.5 9.5C10.0523 9.5 10.5 9.94772 10.5 10.5V16.5C10.5 17.0523 10.0523 17.5 9.5 17.5C8.94772 17.5 8.5 17.0523 8.5 16.5ZM13.5 16.5V10.5C13.5 9.94772 13.9477 9.5 14.5 9.5C15.0523 9.5 15.5 9.94772 15.5 10.5V16.5C15.5 17.0523 15.0523 17.5 14.5 17.5C13.9477 17.5 13.5 17.0523 13.5 16.5ZM12.0342 3C11.4836 3 11.1368 3.00121 10.8711 3.02539C10.6244 3.04787 10.5252 3.0851 10.4648 3.11719C10.4162 3.1431 10.3699 3.17347 10.3262 3.20704C10.2719 3.24867 10.197 3.32298 10.0742 3.53809C9.94974 3.75626 9.81445 4.04841 9.6084 4.5H14.46C14.2334 4.03272 14.0884 3.73644 13.957 3.51758C13.8328 3.31053 13.7579 3.23841 13.7041 3.19825C13.6607 3.16589 13.6144 3.13723 13.5664 3.11231C13.5068 3.08139 13.4095 3.04593 13.1689 3.02442C12.9097 3.00124 12.5715 3 12.0342 3Z"
fill="currentColor"
/>
</svg>
);
export function ButtonIcon() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Fill Variant - All Sizes */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Fill Variant - Icon Only
</div>
<div className="flex items-center flex-wrap gap-(--gap-4)">
<Button
iconOnly
icon={<SearchIcon />}
size="xxl"
aria-label="Search"
/>
<Button
iconOnly
icon={<SearchIcon />}
size="xl"
aria-label="Search"
/>
<Button iconOnly icon={<SearchIcon />} size="l" aria-label="Search" />
<Button iconOnly icon={<SearchIcon />} size="m" aria-label="Search" />
<Button iconOnly icon={<SearchIcon />} size="r" aria-label="Search" />
<Button iconOnly icon={<SearchIcon />} size="s" aria-label="Search" />
<Button
iconOnly
icon={<SearchIcon />}
size="xs"
aria-label="Search"
/>
<Button
iconOnly
icon={<SearchIcon />}
size="xxs"
aria-label="Search"
/>
</div>
</div>
{/* Line Variant - All Sizes */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Line Variant - Icon Only
</div>
<div className="flex items-center flex-wrap gap-(--gap-4)">
<Button
iconOnly
variant="line"
icon={<PlusIcon />}
size="xxl"
aria-label="Add"
/>
<Button
iconOnly
variant="line"
icon={<PlusIcon />}
size="xl"
aria-label="Add"
/>
<Button
iconOnly
variant="line"
icon={<PlusIcon />}
size="l"
aria-label="Add"
/>
<Button
iconOnly
variant="line"
icon={<PlusIcon />}
size="m"
aria-label="Add"
/>
<Button
iconOnly
variant="line"
icon={<PlusIcon />}
size="r"
aria-label="Add"
/>
<Button
iconOnly
variant="line"
icon={<PlusIcon />}
size="s"
aria-label="Add"
/>
<Button
iconOnly
variant="line"
icon={<PlusIcon />}
size="xs"
aria-label="Add"
/>
<Button
iconOnly
variant="line"
icon={<PlusIcon />}
size="xxs"
aria-label="Add"
/>
</div>
</div>
{/* Text Variant - All Sizes */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Text Variant - Icon Only
</div>
<div className="flex items-center flex-wrap gap-(--gap-4)">
<Button
iconOnly
variant="text"
icon={<HeartIcon />}
size="xxl"
aria-label="Like"
/>
<Button
iconOnly
variant="text"
icon={<HeartIcon />}
size="xl"
aria-label="Like"
/>
<Button
iconOnly
variant="text"
icon={<HeartIcon />}
size="l"
aria-label="Like"
/>
<Button
iconOnly
variant="text"
icon={<HeartIcon />}
size="m"
aria-label="Like"
/>
<Button
iconOnly
variant="text"
icon={<HeartIcon />}
size="r"
aria-label="Like"
/>
<Button
iconOnly
variant="text"
icon={<HeartIcon />}
size="s"
aria-label="Like"
/>
<Button
iconOnly
variant="text"
icon={<HeartIcon />}
size="xs"
aria-label="Like"
/>
<Button
iconOnly
variant="text"
icon={<HeartIcon />}
size="xxs"
aria-label="Like"
/>
</div>
</div>
{/* Button with Left Icon */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
With Left Icon
</div>
<div className="flex items-center flex-wrap gap-(--gap-4)">
<Button leftIcon={<SearchIcon />} size="xxl">
Search
</Button>
<Button leftIcon={<SearchIcon />} size="xl">
Search
</Button>
<Button leftIcon={<SearchIcon />} size="l">
Search
</Button>
<Button leftIcon={<SearchIcon />} size="m">
Search
</Button>
<Button leftIcon={<SearchIcon />} size="r">
Search
</Button>
<Button leftIcon={<SearchIcon />} size="s">
Search
</Button>
<Button leftIcon={<SearchIcon />} size="xs">
Search
</Button>
<Button leftIcon={<SearchIcon />} size="xxs">
Search
</Button>
</div>
</div>
{/* Button with Right Icon */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
With Right Icon
</div>
<div className="flex items-center flex-wrap gap-(--gap-4)">
<Button rightIcon={<PlusIcon />} size="xxl">
Create
</Button>
<Button rightIcon={<PlusIcon />} size="xl">
Create
</Button>
<Button rightIcon={<PlusIcon />} size="l">
Create
</Button>
<Button rightIcon={<PlusIcon />} size="m">
Create
</Button>
<Button rightIcon={<PlusIcon />} size="r">
Create
</Button>
<Button rightIcon={<PlusIcon />} size="s">
Create
</Button>
<Button rightIcon={<PlusIcon />} size="xs">
Create
</Button>
<Button rightIcon={<PlusIcon />} size="xxs">
Create
</Button>
</div>
</div>
{/* Button with Both Icons */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
With Both Icons
</div>
<div className="flex items-center flex-wrap gap-(--gap-4)">
<Button leftIcon={<SearchIcon />} rightIcon={<PlusIcon />} size="xxl">
Action
</Button>
<Button leftIcon={<SearchIcon />} rightIcon={<PlusIcon />} size="xl">
Action
</Button>
<Button leftIcon={<SearchIcon />} rightIcon={<PlusIcon />} size="l">
Action
</Button>
<Button leftIcon={<SearchIcon />} rightIcon={<PlusIcon />} size="m">
Action
</Button>
<Button leftIcon={<SearchIcon />} rightIcon={<PlusIcon />} size="r">
Action
</Button>
<Button leftIcon={<SearchIcon />} rightIcon={<PlusIcon />} size="s">
Action
</Button>
<Button leftIcon={<SearchIcon />} rightIcon={<PlusIcon />} size="xs">
Action
</Button>
<Button leftIcon={<SearchIcon />} rightIcon={<PlusIcon />} size="xxs">
Action
</Button>
</div>
</div>
{/* Button with colorScheme State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
With colorScheme
</div>
<div className="flex items-center flex-wrap gap-(--gap-4)">
<Button colorScheme="default" icon={<DeleteIcon />} iconOnly></Button>
<Button
colorScheme="destructive"
icon={<DeleteIcon />}
iconOnly
></Button>
<Button colorScheme="warning" icon={<DeleteIcon />} iconOnly></Button>
<Button colorScheme="success" icon={<DeleteIcon />} iconOnly></Button>
<Button colorScheme="iris" icon={<DeleteIcon />} iconOnly></Button>
<Button
colorScheme="default"
icon={<DeleteIcon />}
iconOnly
variant="line"
></Button>
<Button
colorScheme="destructive"
icon={<DeleteIcon />}
iconOnly
variant="line"
></Button>
<Button
colorScheme="warning"
icon={<DeleteIcon />}
iconOnly
variant="line"
></Button>
<Button
colorScheme="success"
icon={<DeleteIcon />}
iconOnly
variant="line"
></Button>
<Button
colorScheme="iris"
icon={<DeleteIcon />}
iconOnly
variant="line"
></Button>
<Button
colorScheme="default"
icon={<DeleteIcon />}
iconOnly
variant="text"
></Button>
<Button
colorScheme="destructive"
icon={<DeleteIcon />}
iconOnly
variant="text"
></Button>
<Button
colorScheme="warning"
icon={<DeleteIcon />}
iconOnly
variant="text"
></Button>
<Button
colorScheme="success"
icon={<DeleteIcon />}
iconOnly
variant="text"
></Button>
<Button
colorScheme="iris"
icon={<DeleteIcon />}
iconOnly
variant="text"
></Button>
</div>
</div>
{/* Button with disabled State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
With disabled State
</div>
<div className="flex items-center flex-wrap gap-(--gap-4)">
<Button disabled icon={<DeleteIcon />} iconOnly></Button>
<Button
disabled
icon={<DeleteIcon />}
iconOnly
variant="line"
></Button>
<Button
disabled
icon={<DeleteIcon />}
iconOnly
variant="text"
></Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonFill() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" size="xxl">
Button
</Button>
<Button variant="fill" size="xl">
Button
</Button>
<Button variant="fill" size="l">
Button
</Button>
<Button variant="fill" size="m">
Button
</Button>
<Button variant="fill" size="r">
Button
</Button>
<Button variant="fill" size="s">
Button
</Button>
<Button variant="fill" size="xs">
Button
</Button>
<Button variant="fill" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="fill"
size="xxl"
className="hover:bg-(--grey-bg-fill-2-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
size="xl"
className="hover:bg-(--grey-bg-fill-2-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
size="l"
className="hover:bg-(--grey-bg-fill-2-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
size="m"
className="hover:bg-(--grey-bg-fill-2-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
size="r"
className="hover:bg-(--grey-bg-fill-2-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
size="s"
className="hover:bg-(--grey-bg-fill-2-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
size="xs"
className="hover:bg-(--grey-bg-fill-2-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
size="xxs"
className="hover:bg-(--grey-bg-fill-2-fill-hover)"
>
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" size="xxl" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="fill" size="xl" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="fill" size="l" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="fill" size="m" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="fill" size="r" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="fill" size="s" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="fill" size="xs" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="fill" size="xxs" className="ring-2 ring-(--blue-9)">
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" size="xxl" loading>
Loading
</Button>
<Button variant="fill" size="xl" loading>
Loading
</Button>
<Button variant="fill" size="l" loading>
Loading
</Button>
<Button variant="fill" size="m" loading>
Loading
</Button>
<Button variant="fill" size="r" loading>
Loading
</Button>
<Button variant="fill" size="s" loading>
Loading
</Button>
<Button variant="fill" size="xs" loading>
Loading
</Button>
<Button variant="fill" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" size="xxl" disabled>
Button
</Button>
<Button variant="fill" size="xl" disabled>
Button
</Button>
<Button variant="fill" size="l" disabled>
Button
</Button>
<Button variant="fill" size="m" disabled>
Button
</Button>
<Button variant="fill" size="r" disabled>
Button
</Button>
<Button variant="fill" size="s" disabled>
Button
</Button>
<Button variant="fill" size="xs" disabled>
Button
</Button>
<Button variant="fill" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonFillDestructive() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="destructive" size="xxl">
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="xl">
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="l">
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="m">
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="r">
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="s">
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="xs">
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="fill"
colorScheme="destructive"
size="xxl"
className="hover:bg-(--functional-color-error-bg-fill-3-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="xl"
className="hover:bg-(--functional-color-error-bg-fill-3-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="l"
className="hover:bg-(--functional-color-error-bg-fill-3-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="m"
className="hover:bg-(--functional-color-error-bg-fill-3-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="r"
className="hover:bg-(--functional-color-error-bg-fill-3-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="s"
className="hover:bg-(--functional-color-error-bg-fill-3-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="xs"
className="hover:bg-(--functional-color-error-bg-fill-3-fill-hover)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="xxs"
className="hover:bg-(--functional-color-error-bg-fill-3-fill-hover)"
>
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="fill"
colorScheme="destructive"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="destructive"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="destructive" size="xxl" loading>
Loading
</Button>
<Button variant="fill" colorScheme="destructive" size="xl" loading>
Loading
</Button>
<Button variant="fill" colorScheme="destructive" size="l" loading>
Loading
</Button>
<Button variant="fill" colorScheme="destructive" size="m" loading>
Loading
</Button>
<Button variant="fill" colorScheme="destructive" size="r" loading>
Loading
</Button>
<Button variant="fill" colorScheme="destructive" size="s" loading>
Loading
</Button>
<Button variant="fill" colorScheme="destructive" size="xs" loading>
Loading
</Button>
<Button variant="fill" colorScheme="destructive" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="destructive" size="xxl" disabled>
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="xl" disabled>
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="l" disabled>
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="m" disabled>
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="r" disabled>
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="s" disabled>
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="xs" disabled>
Button
</Button>
<Button variant="fill" colorScheme="destructive" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonFillWarning() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="warning" size="xxl">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="xl">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="l">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="m">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="r">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="s">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="xs">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="warning" size="xxl">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="xl">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="l">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="m">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="r">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="s">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="xs">
Button
</Button>
<Button variant="fill" colorScheme="warning" size="xxs">
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="fill"
colorScheme="warning"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="warning"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="warning"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="warning"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="warning"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="warning"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="warning"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="warning"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="warning" size="xxl" loading>
Loading
</Button>
<Button variant="fill" colorScheme="warning" size="xl" loading>
Loading
</Button>
<Button variant="fill" colorScheme="warning" size="l" loading>
Loading
</Button>
<Button variant="fill" colorScheme="warning" size="m" loading>
Loading
</Button>
<Button variant="fill" colorScheme="warning" size="r" loading>
Loading
</Button>
<Button variant="fill" colorScheme="warning" size="s" loading>
Loading
</Button>
<Button variant="fill" colorScheme="warning" size="xs" loading>
Loading
</Button>
<Button variant="fill" colorScheme="warning" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="warning" size="xxl" disabled>
Button
</Button>
<Button variant="fill" colorScheme="warning" size="xl" disabled>
Button
</Button>
<Button variant="fill" colorScheme="warning" size="l" disabled>
Button
</Button>
<Button variant="fill" colorScheme="warning" size="m" disabled>
Button
</Button>
<Button variant="fill" colorScheme="warning" size="r" disabled>
Button
</Button>
<Button variant="fill" colorScheme="warning" size="s" disabled>
Button
</Button>
<Button variant="fill" colorScheme="warning" size="xs" disabled>
Button
</Button>
<Button variant="fill" colorScheme="warning" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonFillSuccess() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="success" size="xxl">
Button
</Button>
<Button variant="fill" colorScheme="success" size="xl">
Button
</Button>
<Button variant="fill" colorScheme="success" size="l">
Button
</Button>
<Button variant="fill" colorScheme="success" size="m">
Button
</Button>
<Button variant="fill" colorScheme="success" size="r">
Button
</Button>
<Button variant="fill" colorScheme="success" size="s">
Button
</Button>
<Button variant="fill" colorScheme="success" size="xs">
Button
</Button>
<Button variant="fill" colorScheme="success" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="success" size="xxl">
Button
</Button>
<Button variant="fill" colorScheme="success" size="xl">
Button
</Button>
<Button variant="fill" colorScheme="success" size="l">
Button
</Button>
<Button variant="fill" colorScheme="success" size="m">
Button
</Button>
<Button variant="fill" colorScheme="success" size="r">
Button
</Button>
<Button variant="fill" colorScheme="success" size="s">
Button
</Button>
<Button variant="fill" colorScheme="success" size="xs">
Button
</Button>
<Button variant="fill" colorScheme="success" size="xxs">
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="fill"
colorScheme="success"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="success"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="success"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="success"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="success"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="success"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="success"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="success"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="success" size="xxl" loading>
Loading
</Button>
<Button variant="fill" colorScheme="success" size="xl" loading>
Loading
</Button>
<Button variant="fill" colorScheme="success" size="l" loading>
Loading
</Button>
<Button variant="fill" colorScheme="success" size="m" loading>
Loading
</Button>
<Button variant="fill" colorScheme="success" size="r" loading>
Loading
</Button>
<Button variant="fill" colorScheme="success" size="s" loading>
Loading
</Button>
<Button variant="fill" colorScheme="success" size="xs" loading>
Loading
</Button>
<Button variant="fill" colorScheme="success" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="success" size="xxl" disabled>
Button
</Button>
<Button variant="fill" colorScheme="success" size="xl" disabled>
Button
</Button>
<Button variant="fill" colorScheme="success" size="l" disabled>
Button
</Button>
<Button variant="fill" colorScheme="success" size="m" disabled>
Button
</Button>
<Button variant="fill" colorScheme="success" size="r" disabled>
Button
</Button>
<Button variant="fill" colorScheme="success" size="s" disabled>
Button
</Button>
<Button variant="fill" colorScheme="success" size="xs" disabled>
Button
</Button>
<Button variant="fill" colorScheme="success" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonFillIris() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="iris" size="xxl">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="xl">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="l">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="m">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="r">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="s">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="xs">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="iris" size="xxl">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="xl">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="l">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="m">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="r">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="s">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="xs">
Button
</Button>
<Button variant="fill" colorScheme="iris" size="xxs">
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="fill"
colorScheme="iris"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="iris"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="iris"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="iris"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="iris"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="iris"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="iris"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="fill"
colorScheme="iris"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="iris" size="xxl" loading>
Loading
</Button>
<Button variant="fill" colorScheme="iris" size="xl" loading>
Loading
</Button>
<Button variant="fill" colorScheme="iris" size="l" loading>
Loading
</Button>
<Button variant="fill" colorScheme="iris" size="m" loading>
Loading
</Button>
<Button variant="fill" colorScheme="iris" size="r" loading>
Loading
</Button>
<Button variant="fill" colorScheme="iris" size="s" loading>
Loading
</Button>
<Button variant="fill" colorScheme="iris" size="xs" loading>
Loading
</Button>
<Button variant="fill" colorScheme="iris" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="fill" colorScheme="iris" size="xxl" disabled>
Button
</Button>
<Button variant="fill" colorScheme="iris" size="xl" disabled>
Button
</Button>
<Button variant="fill" colorScheme="iris" size="l" disabled>
Button
</Button>
<Button variant="fill" colorScheme="iris" size="m" disabled>
Button
</Button>
<Button variant="fill" colorScheme="iris" size="r" disabled>
Button
</Button>
<Button variant="fill" colorScheme="iris" size="s" disabled>
Button
</Button>
<Button variant="fill" colorScheme="iris" size="xs" disabled>
Button
</Button>
<Button variant="fill" colorScheme="iris" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonLine() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" size="xxl">
Button
</Button>
<Button variant="line" size="xl">
Button
</Button>
<Button variant="line" size="l">
Button
</Button>
<Button variant="line" size="m">
Button
</Button>
<Button variant="line" size="r">
Button
</Button>
<Button variant="line" size="s">
Button
</Button>
<Button variant="line" size="xs">
Button
</Button>
<Button variant="line" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="line"
size="xxl"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="line"
size="xl"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="line"
size="l"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="line"
size="m"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="line"
size="r"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="line"
size="s"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="line"
size="xs"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="line"
size="xxs"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" size="xxl" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="line" size="xl" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="line" size="l" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="line" size="m" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="line" size="r" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="line" size="s" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="line" size="xs" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="line" size="xxs" className="ring-2 ring-(--blue-9)">
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" size="xxl" loading>
Loading
</Button>
<Button variant="line" size="xl" loading>
Loading
</Button>
<Button variant="line" size="l" loading>
Loading
</Button>
<Button variant="line" size="m" loading>
Loading
</Button>
<Button variant="line" size="r" loading>
Loading
</Button>
<Button variant="line" size="s" loading>
Loading
</Button>
<Button variant="line" size="xs" loading>
Loading
</Button>
<Button variant="line" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" size="xxl" disabled>
Button
</Button>
<Button variant="line" size="xl" disabled>
Button
</Button>
<Button variant="line" size="l" disabled>
Button
</Button>
<Button variant="line" size="m" disabled>
Button
</Button>
<Button variant="line" size="r" disabled>
Button
</Button>
<Button variant="line" size="s" disabled>
Button
</Button>
<Button variant="line" size="xs" disabled>
Button
</Button>
<Button variant="line" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonLineDestructive() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="destructive" size="xxl">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="xl">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="l">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="m">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="r">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="s">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="xs">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="destructive" size="xxl">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="xl">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="l">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="m">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="r">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="s">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="xs">
Button
</Button>
<Button variant="line" colorScheme="destructive" size="xxs">
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="line"
colorScheme="destructive"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="destructive"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="destructive"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="destructive"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="destructive"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="destructive"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="destructive"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="destructive"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="destructive" size="xxl" loading>
Loading
</Button>
<Button variant="line" colorScheme="destructive" size="xl" loading>
Loading
</Button>
<Button variant="line" colorScheme="destructive" size="l" loading>
Loading
</Button>
<Button variant="line" colorScheme="destructive" size="m" loading>
Loading
</Button>
<Button variant="line" colorScheme="destructive" size="r" loading>
Loading
</Button>
<Button variant="line" colorScheme="destructive" size="s" loading>
Loading
</Button>
<Button variant="line" colorScheme="destructive" size="xs" loading>
Loading
</Button>
<Button variant="line" colorScheme="destructive" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="destructive" size="xxl" disabled>
Button
</Button>
<Button variant="line" colorScheme="destructive" size="xl" disabled>
Button
</Button>
<Button variant="line" colorScheme="destructive" size="l" disabled>
Button
</Button>
<Button variant="line" colorScheme="destructive" size="m" disabled>
Button
</Button>
<Button variant="line" colorScheme="destructive" size="r" disabled>
Button
</Button>
<Button variant="line" colorScheme="destructive" size="s" disabled>
Button
</Button>
<Button variant="line" colorScheme="destructive" size="xs" disabled>
Button
</Button>
<Button variant="line" colorScheme="destructive" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonLineWarning() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="warning" size="xxl">
Button
</Button>
<Button variant="line" colorScheme="warning" size="xl">
Button
</Button>
<Button variant="line" colorScheme="warning" size="l">
Button
</Button>
<Button variant="line" colorScheme="warning" size="m">
Button
</Button>
<Button variant="line" colorScheme="warning" size="r">
Button
</Button>
<Button variant="line" colorScheme="warning" size="s">
Button
</Button>
<Button variant="line" colorScheme="warning" size="xs">
Button
</Button>
<Button variant="line" colorScheme="warning" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="warning" size="xxl">
Button
</Button>
<Button variant="line" colorScheme="warning" size="xl">
Button
</Button>
<Button variant="line" colorScheme="warning" size="l">
Button
</Button>
<Button variant="line" colorScheme="warning" size="m">
Button
</Button>
<Button variant="line" colorScheme="warning" size="r">
Button
</Button>
<Button variant="line" colorScheme="warning" size="s">
Button
</Button>
<Button variant="line" colorScheme="warning" size="xs">
Button
</Button>
<Button variant="line" colorScheme="warning" size="xxs">
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="line"
colorScheme="warning"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="warning"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="warning"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="warning"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="warning"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="warning"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="warning"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="warning"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="warning" size="xxl" loading>
Loading
</Button>
<Button variant="line" colorScheme="warning" size="xl" loading>
Loading
</Button>
<Button variant="line" colorScheme="warning" size="l" loading>
Loading
</Button>
<Button variant="line" colorScheme="warning" size="m" loading>
Loading
</Button>
<Button variant="line" colorScheme="warning" size="r" loading>
Loading
</Button>
<Button variant="line" colorScheme="warning" size="s" loading>
Loading
</Button>
<Button variant="line" colorScheme="warning" size="xs" loading>
Loading
</Button>
<Button variant="line" colorScheme="warning" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="warning" size="xxl" disabled>
Button
</Button>
<Button variant="line" colorScheme="warning" size="xl" disabled>
Button
</Button>
<Button variant="line" colorScheme="warning" size="l" disabled>
Button
</Button>
<Button variant="line" colorScheme="warning" size="m" disabled>
Button
</Button>
<Button variant="line" colorScheme="warning" size="r" disabled>
Button
</Button>
<Button variant="line" colorScheme="warning" size="s" disabled>
Button
</Button>
<Button variant="line" colorScheme="warning" size="xs" disabled>
Button
</Button>
<Button variant="line" colorScheme="warning" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonLineSuccess() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="success" size="xxl">
Button
</Button>
<Button variant="line" colorScheme="success" size="xl">
Button
</Button>
<Button variant="line" colorScheme="success" size="l">
Button
</Button>
<Button variant="line" colorScheme="success" size="m">
Button
</Button>
<Button variant="line" colorScheme="success" size="r">
Button
</Button>
<Button variant="line" colorScheme="success" size="s">
Button
</Button>
<Button variant="line" colorScheme="success" size="xs">
Button
</Button>
<Button variant="line" colorScheme="success" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="success" size="xxl">
Button
</Button>
<Button variant="line" colorScheme="success" size="xl">
Button
</Button>
<Button variant="line" colorScheme="success" size="l">
Button
</Button>
<Button variant="line" colorScheme="success" size="m">
Button
</Button>
<Button variant="line" colorScheme="success" size="r">
Button
</Button>
<Button variant="line" colorScheme="success" size="s">
Button
</Button>
<Button variant="line" colorScheme="success" size="xs">
Button
</Button>
<Button variant="line" colorScheme="success" size="xxs">
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="line"
colorScheme="success"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="success"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="success"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="success"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="success"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="success"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="success"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="success"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="success" size="xxl" loading>
Loading
</Button>
<Button variant="line" colorScheme="success" size="xl" loading>
Loading
</Button>
<Button variant="line" colorScheme="success" size="l" loading>
Loading
</Button>
<Button variant="line" colorScheme="success" size="m" loading>
Loading
</Button>
<Button variant="line" colorScheme="success" size="r" loading>
Loading
</Button>
<Button variant="line" colorScheme="success" size="s" loading>
Loading
</Button>
<Button variant="line" colorScheme="success" size="xs" loading>
Loading
</Button>
<Button variant="line" colorScheme="success" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="success" size="xxl" disabled>
Button
</Button>
<Button variant="line" colorScheme="success" size="xl" disabled>
Button
</Button>
<Button variant="line" colorScheme="success" size="l" disabled>
Button
</Button>
<Button variant="line" colorScheme="success" size="m" disabled>
Button
</Button>
<Button variant="line" colorScheme="success" size="r" disabled>
Button
</Button>
<Button variant="line" colorScheme="success" size="s" disabled>
Button
</Button>
<Button variant="line" colorScheme="success" size="xs" disabled>
Button
</Button>
<Button variant="line" colorScheme="success" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonLineIris() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="iris" size="xxl">
Button
</Button>
<Button variant="line" colorScheme="iris" size="xl">
Button
</Button>
<Button variant="line" colorScheme="iris" size="l">
Button
</Button>
<Button variant="line" colorScheme="iris" size="m">
Button
</Button>
<Button variant="line" colorScheme="iris" size="r">
Button
</Button>
<Button variant="line" colorScheme="iris" size="s">
Button
</Button>
<Button variant="line" colorScheme="iris" size="xs">
Button
</Button>
<Button variant="line" colorScheme="iris" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="iris" size="xxl">
Button
</Button>
<Button variant="line" colorScheme="iris" size="xl">
Button
</Button>
<Button variant="line" colorScheme="iris" size="l">
Button
</Button>
<Button variant="line" colorScheme="iris" size="m">
Button
</Button>
<Button variant="line" colorScheme="iris" size="r">
Button
</Button>
<Button variant="line" colorScheme="iris" size="s">
Button
</Button>
<Button variant="line" colorScheme="iris" size="xs">
Button
</Button>
<Button variant="line" colorScheme="iris" size="xxs">
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="line"
colorScheme="iris"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="iris"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="iris"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="iris"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="iris"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="iris"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="iris"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="line"
colorScheme="iris"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="iris" size="xxl" loading>
Loading
</Button>
<Button variant="line" colorScheme="iris" size="xl" loading>
Loading
</Button>
<Button variant="line" colorScheme="iris" size="l" loading>
Loading
</Button>
<Button variant="line" colorScheme="iris" size="m" loading>
Loading
</Button>
<Button variant="line" colorScheme="iris" size="r" loading>
Loading
</Button>
<Button variant="line" colorScheme="iris" size="s" loading>
Loading
</Button>
<Button variant="line" colorScheme="iris" size="xs" loading>
Loading
</Button>
<Button variant="line" colorScheme="iris" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="line" colorScheme="iris" size="xxl" disabled>
Button
</Button>
<Button variant="line" colorScheme="iris" size="xl" disabled>
Button
</Button>
<Button variant="line" colorScheme="iris" size="l" disabled>
Button
</Button>
<Button variant="line" colorScheme="iris" size="m" disabled>
Button
</Button>
<Button variant="line" colorScheme="iris" size="r" disabled>
Button
</Button>
<Button variant="line" colorScheme="iris" size="s" disabled>
Button
</Button>
<Button variant="line" colorScheme="iris" size="xs" disabled>
Button
</Button>
<Button variant="line" colorScheme="iris" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonTextDestructive() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="destructive" size="xxl">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="xl">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="l">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="m">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="r">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="s">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="xs">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="destructive" size="xxl">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="xl">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="l">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="m">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="r">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="s">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="xs">
Button
</Button>
<Button variant="text" colorScheme="destructive" size="xxs">
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="text"
colorScheme="destructive"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="destructive"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="destructive"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="destructive"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="destructive"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="destructive"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="destructive"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="destructive"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="destructive" size="xxl" loading>
Loading
</Button>
<Button variant="text" colorScheme="destructive" size="xl" loading>
Loading
</Button>
<Button variant="text" colorScheme="destructive" size="l" loading>
Loading
</Button>
<Button variant="text" colorScheme="destructive" size="m" loading>
Loading
</Button>
<Button variant="text" colorScheme="destructive" size="r" loading>
Loading
</Button>
<Button variant="text" colorScheme="destructive" size="s" loading>
Loading
</Button>
<Button variant="text" colorScheme="destructive" size="xs" loading>
Loading
</Button>
<Button variant="text" colorScheme="destructive" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="destructive" size="xxl" disabled>
Button
</Button>
<Button variant="text" colorScheme="destructive" size="xl" disabled>
Button
</Button>
<Button variant="text" colorScheme="destructive" size="l" disabled>
Button
</Button>
<Button variant="text" colorScheme="destructive" size="m" disabled>
Button
</Button>
<Button variant="text" colorScheme="destructive" size="r" disabled>
Button
</Button>
<Button variant="text" colorScheme="destructive" size="s" disabled>
Button
</Button>
<Button variant="text" colorScheme="destructive" size="xs" disabled>
Button
</Button>
<Button variant="text" colorScheme="destructive" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonText() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" size="xxl">
Button
</Button>
<Button variant="text" size="xl">
Button
</Button>
<Button variant="text" size="l">
Button
</Button>
<Button variant="text" size="m">
Button
</Button>
<Button variant="text" size="r">
Button
</Button>
<Button variant="text" size="s">
Button
</Button>
<Button variant="text" size="xs">
Button
</Button>
<Button variant="text" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="text"
size="xxl"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="text"
size="xl"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="text"
size="l"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="text"
size="m"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="text"
size="r"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="text"
size="s"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="text"
size="xs"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
<Button
variant="text"
size="xxs"
className="hover:bg-(--grey-bg-fill-10-bg-hover)"
>
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" size="xxl" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="text" size="xl" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="text" size="l" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="text" size="m" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="text" size="r" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="text" size="s" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="text" size="xs" className="ring-2 ring-(--blue-9)">
Button
</Button>
<Button variant="text" size="xxs" className="ring-2 ring-(--blue-9)">
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" size="xxl" loading>
Loading
</Button>
<Button variant="text" size="xl" loading>
Loading
</Button>
<Button variant="text" size="l" loading>
Loading
</Button>
<Button variant="text" size="m" loading>
Loading
</Button>
<Button variant="text" size="r" loading>
Loading
</Button>
<Button variant="text" size="s" loading>
Loading
</Button>
<Button variant="text" size="xs" loading>
Loading
</Button>
<Button variant="text" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" size="xxl" disabled>
Button
</Button>
<Button variant="text" size="xl" disabled>
Button
</Button>
<Button variant="text" size="l" disabled>
Button
</Button>
<Button variant="text" size="m" disabled>
Button
</Button>
<Button variant="text" size="r" disabled>
Button
</Button>
<Button variant="text" size="s" disabled>
Button
</Button>
<Button variant="text" size="xs" disabled>
Button
</Button>
<Button variant="text" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonTextWarning() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="warning" size="xxl">
Button
</Button>
<Button variant="text" colorScheme="warning" size="xl">
Button
</Button>
<Button variant="text" colorScheme="warning" size="l">
Button
</Button>
<Button variant="text" colorScheme="warning" size="m">
Button
</Button>
<Button variant="text" colorScheme="warning" size="r">
Button
</Button>
<Button variant="text" colorScheme="warning" size="s">
Button
</Button>
<Button variant="text" colorScheme="warning" size="xs">
Button
</Button>
<Button variant="text" colorScheme="warning" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="warning" size="xxl">
Button
</Button>
<Button variant="text" colorScheme="warning" size="xl">
Button
</Button>
<Button variant="text" colorScheme="warning" size="l">
Button
</Button>
<Button variant="text" colorScheme="warning" size="m">
Button
</Button>
<Button variant="text" colorScheme="warning" size="r">
Button
</Button>
<Button variant="text" colorScheme="warning" size="s">
Button
</Button>
<Button variant="text" colorScheme="warning" size="xs">
Button
</Button>
<Button variant="text" colorScheme="warning" size="xxs">
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="text"
colorScheme="warning"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="warning"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="warning"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="warning"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="warning"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="warning"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="warning"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="warning"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="warning" size="xxl" loading>
Loading
</Button>
<Button variant="text" colorScheme="warning" size="xl" loading>
Loading
</Button>
<Button variant="text" colorScheme="warning" size="l" loading>
Loading
</Button>
<Button variant="text" colorScheme="warning" size="m" loading>
Loading
</Button>
<Button variant="text" colorScheme="warning" size="r" loading>
Loading
</Button>
<Button variant="text" colorScheme="warning" size="s" loading>
Loading
</Button>
<Button variant="text" colorScheme="warning" size="xs" loading>
Loading
</Button>
<Button variant="text" colorScheme="warning" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="warning" size="xxl" disabled>
Button
</Button>
<Button variant="text" colorScheme="warning" size="xl" disabled>
Button
</Button>
<Button variant="text" colorScheme="warning" size="l" disabled>
Button
</Button>
<Button variant="text" colorScheme="warning" size="m" disabled>
Button
</Button>
<Button variant="text" colorScheme="warning" size="r" disabled>
Button
</Button>
<Button variant="text" colorScheme="warning" size="s" disabled>
Button
</Button>
<Button variant="text" colorScheme="warning" size="xs" disabled>
Button
</Button>
<Button variant="text" colorScheme="warning" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonTextSuccess() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="success" size="xxl">
Button
</Button>
<Button variant="text" colorScheme="success" size="xl">
Button
</Button>
<Button variant="text" colorScheme="success" size="l">
Button
</Button>
<Button variant="text" colorScheme="success" size="m">
Button
</Button>
<Button variant="text" colorScheme="success" size="r">
Button
</Button>
<Button variant="text" colorScheme="success" size="s">
Button
</Button>
<Button variant="text" colorScheme="success" size="xs">
Button
</Button>
<Button variant="text" colorScheme="success" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="success" size="xxl">
Button
</Button>
<Button variant="text" colorScheme="success" size="xl">
Button
</Button>
<Button variant="text" colorScheme="success" size="l">
Button
</Button>
<Button variant="text" colorScheme="success" size="m">
Button
</Button>
<Button variant="text" colorScheme="success" size="r">
Button
</Button>
<Button variant="text" colorScheme="success" size="s">
Button
</Button>
<Button variant="text" colorScheme="success" size="xs">
Button
</Button>
<Button variant="text" colorScheme="success" size="xxs">
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="text"
colorScheme="success"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="success"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="success"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="success"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="success"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="success"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="success"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="success"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="success" size="xxl" loading>
Loading
</Button>
<Button variant="text" colorScheme="success" size="xl" loading>
Loading
</Button>
<Button variant="text" colorScheme="success" size="l" loading>
Loading
</Button>
<Button variant="text" colorScheme="success" size="m" loading>
Loading
</Button>
<Button variant="text" colorScheme="success" size="r" loading>
Loading
</Button>
<Button variant="text" colorScheme="success" size="s" loading>
Loading
</Button>
<Button variant="text" colorScheme="success" size="xs" loading>
Loading
</Button>
<Button variant="text" colorScheme="success" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="success" size="xxl" disabled>
Button
</Button>
<Button variant="text" colorScheme="success" size="xl" disabled>
Button
</Button>
<Button variant="text" colorScheme="success" size="l" disabled>
Button
</Button>
<Button variant="text" colorScheme="success" size="m" disabled>
Button
</Button>
<Button variant="text" colorScheme="success" size="r" disabled>
Button
</Button>
<Button variant="text" colorScheme="success" size="s" disabled>
Button
</Button>
<Button variant="text" colorScheme="success" size="xs" disabled>
Button
</Button>
<Button variant="text" colorScheme="success" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
import { Button } from '@/registry/basic-ui/button';
export function ButtonTextIris() {
return (
<div className="flex flex-col gap-(--gap-8)">
{/* Default State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Default
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="iris" size="xxl">
Button
</Button>
<Button variant="text" colorScheme="iris" size="xl">
Button
</Button>
<Button variant="text" colorScheme="iris" size="l">
Button
</Button>
<Button variant="text" colorScheme="iris" size="m">
Button
</Button>
<Button variant="text" colorScheme="iris" size="r">
Button
</Button>
<Button variant="text" colorScheme="iris" size="s">
Button
</Button>
<Button variant="text" colorScheme="iris" size="xs">
Button
</Button>
<Button variant="text" colorScheme="iris" size="xxs">
Button
</Button>
</div>
</div>
{/* Hover State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Hover
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="iris" size="xxl">
Button
</Button>
<Button variant="text" colorScheme="iris" size="xl">
Button
</Button>
<Button variant="text" colorScheme="iris" size="l">
Button
</Button>
<Button variant="text" colorScheme="iris" size="m">
Button
</Button>
<Button variant="text" colorScheme="iris" size="r">
Button
</Button>
<Button variant="text" colorScheme="iris" size="s">
Button
</Button>
<Button variant="text" colorScheme="iris" size="xs">
Button
</Button>
<Button variant="text" colorScheme="iris" size="xxs">
Button
</Button>
</div>
</div>
{/* Focus State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Focus
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button
variant="text"
colorScheme="iris"
size="xxl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="iris"
size="xl"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="iris"
size="l"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="iris"
size="m"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="iris"
size="r"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="iris"
size="s"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="iris"
size="xs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
<Button
variant="text"
colorScheme="iris"
size="xxs"
className="ring-2 ring-(--blue-9)"
>
Button
</Button>
</div>
</div>
{/* Loading State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Loading
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="iris" size="xxl" loading>
Loading
</Button>
<Button variant="text" colorScheme="iris" size="xl" loading>
Loading
</Button>
<Button variant="text" colorScheme="iris" size="l" loading>
Loading
</Button>
<Button variant="text" colorScheme="iris" size="m" loading>
Loading
</Button>
<Button variant="text" colorScheme="iris" size="r" loading>
Loading
</Button>
<Button variant="text" colorScheme="iris" size="s" loading>
Loading
</Button>
<Button variant="text" colorScheme="iris" size="xs" loading>
Loading
</Button>
<Button variant="text" colorScheme="iris" size="xxs" loading>
Loading
</Button>
</div>
</div>
{/* Disable State */}
<div>
<div className="mb-(--gap-4) text-sm font-medium text-(--grey-text-alpha-2)">
Disable
</div>
<div className="flex items-center flex-wrap gap-(--gap-6)">
<Button variant="text" colorScheme="iris" size="xxl" disabled>
Button
</Button>
<Button variant="text" colorScheme="iris" size="xl" disabled>
Button
</Button>
<Button variant="text" colorScheme="iris" size="l" disabled>
Button
</Button>
<Button variant="text" colorScheme="iris" size="m" disabled>
Button
</Button>
<Button variant="text" colorScheme="iris" size="r" disabled>
Button
</Button>
<Button variant="text" colorScheme="iris" size="s" disabled>
Button
</Button>
<Button variant="text" colorScheme="iris" size="xs" disabled>
Button
</Button>
<Button variant="text" colorScheme="iris" size="xxs" disabled>
Button
</Button>
</div>
</div>
</div>
);
}
export function ButtonDesign() {
const specifications = [
{
size: '20-XXS',
iconSize: 12,
fontSize: 14,
fontPadding: 2,
radius: 5,
buttonPadding: 4,
},
{
size: '24-XS',
iconSize: 14,
fontSize: 14,
fontPadding: 2,
radius: 6,
buttonPadding: 6,
},
{
size: '28-S',
iconSize: 14,
fontSize: 14,
fontPadding: 2,
radius: 7,
buttonPadding: 8,
},
{
size: '32-R',
iconSize: 14,
fontSize: 14,
fontPadding: 2,
radius: 8,
buttonPadding: 10,
},
{
size: '36-M',
iconSize: 14,
fontSize: 14,
fontPadding: 2,
radius: 9,
buttonPadding: 12,
},
{
size: '40-L',
iconSize: 16,
fontSize: 16,
fontPadding: 4,
radius: 10,
buttonPadding: 14,
},
{
size: '44-XL',
iconSize: 16,
fontSize: 16,
fontPadding: 4,
radius: 11,
buttonPadding: 16,
},
{
size: '48-XXL',
iconSize: 16,
fontSize: 16,
fontPadding: 4,
radius: 12,
buttonPadding: 18,
},
];
return (
<div className="w-full overflow-x-auto">
<table className="w-full border-collapse">
<thead>
<tr className="bg-(--grey-bg-fill-11-bg-default)">
<th className="px-(--gap-4) py-(--gap-3) text-left text-sm font-medium text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-4-hover)">
size
</th>
<th className="px-(--gap-4) py-(--gap-3) text-left text-sm font-medium text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-4-hover)">
icon-size
</th>
<th className="px-(--gap-4) py-(--gap-3) text-left text-sm font-medium text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-4-hover)">
font-size
</th>
<th className="px-(--gap-4) py-(--gap-3) text-left text-sm font-medium text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-4-hover)">
font-padding
</th>
<th className="px-(--gap-4) py-(--gap-3) text-left text-sm font-medium text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-4-hover)">
radius
</th>
<th className="px-(--gap-4) py-(--gap-3) text-left text-sm font-medium text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-4-hover)">
button-padding
</th>
</tr>
</thead>
<tbody>
{specifications.map((spec, index) => (
<tr
key={spec.size}
className={
index % 2 === 0
? 'bg-(--white-1)'
: 'bg-(--grey-bg-fill-11-bg-default)'
}
>
<td className="px-(--gap-4) py-(--gap-3) text-sm text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-5-default)">
{spec.size}
</td>
<td className="px-(--gap-4) py-(--gap-3) text-sm text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-5-default)">
{spec.iconSize}
</td>
<td className="px-(--gap-4) py-(--gap-3) text-sm text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-5-default)">
{spec.fontSize}
</td>
<td className="px-(--gap-4) py-(--gap-3) text-sm text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-5-default)">
{spec.fontPadding}
</td>
<td className="px-(--gap-4) py-(--gap-3) text-sm text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-5-default)">
{spec.radius}
</td>
<td className="px-(--gap-4) py-(--gap-3) text-sm text-(--grey-text-alpha-1-default) border-b border-(--grey-stroke-alpha-5-default)">
{spec.buttonPadding}
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}