rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-02 08:58:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add button

Browse Source
This commit is contained in:
shadcn
2026-01-14 21:30:23 +04:00
parent d0fe494491
commit 7031141cf3
25 changed files with 119 additions and 1542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
apps/v4/content/docs/components/base/button.mdx
View File

@@ -6,28 +6,7 @@ base: base
component: true
---
import { InfoIcon } from "lucide-react"
<Callout variant="info" icon={<InfoIcon />}>
**Updated:** We have updated the button component to add new sizes: `icon-sm` and `icon-lg`. See the
[changelog](/docs/components/button#changelog) for more details. Follow the
instructions to update your project.
</Callout>
<ComponentPreview
styleName="base-nova"
name="button-demo"
description="A button"
className="mb-4"
/>
```tsx showLineNumbers
<Button variant="outline">Button</Button>
<Button variant="outline" size="icon" aria-label="Submit">
<ArrowUpIcon />
</Button>
```
<ComponentPreview styleName="base-nova" name="button-demo" />
## Installation
@@ -100,223 +79,67 @@ If you want to keep the `cursor: pointer` behavior, add the following code to yo
### Size
<ComponentPreview styleName="base-nova" name="button-size" className="mb-4" />
Use the `size` prop to change the size of the button.
```tsx
// Small
<Button size="sm" variant="outline">Small</Button>
<Button size="icon-sm" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
// Medium
<Button variant="outline">Default</Button>
<Button size="icon" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
// Large
<Button size="lg" variant="outline">Large</Button>
<Button size="icon-lg" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
```
<ComponentPreview styleName="base-nova" name="button-size" />
### Default
<ComponentPreview
styleName="base-nova"
name="button-default"
description="A primary button"
className="mb-4"
/>
```tsx
<Button>Button</Button>
```
<ComponentPreview styleName="base-nova" name="button-default" />
### Outline
<ComponentPreview
styleName="base-nova"
name="button-outline"
description="A button using the outline variant."
className="mb-4"
/>
```tsx
<Button variant="outline">Outline</Button>
```
<ComponentPreview styleName="base-nova" name="button-outline" />
### Secondary
<ComponentPreview
styleName="base-nova"
name="button-secondary"
description="A secondary button"
className="mb-4"
/>
```tsx
<Button variant="secondary">Secondary</Button>
```
<ComponentPreview styleName="base-nova" name="button-secondary" />
### Ghost
<ComponentPreview
styleName="base-nova"
name="button-ghost"
description="A button using the ghost variant"
className="mb-4"
/>
```tsx
<Button variant="ghost">Ghost</Button>
```
<ComponentPreview styleName="base-nova" name="button-ghost" />
### Destructive
<ComponentPreview
styleName="base-nova"
name="button-destructive"
description="A destructive button"
className="mb-4"
/>
```tsx
<Button variant="destructive">Destructive</Button>
```
<ComponentPreview styleName="base-nova" name="button-destructive" />
### Link
<ComponentPreview
styleName="base-nova"
name="button-link"
description="A button using the link variant."
className="mb-4"
/>
```tsx
<Button variant="link">Link</Button>
```
<ComponentPreview styleName="base-nova" name="button-link" />
### Icon
<ComponentPreview
styleName="base-nova"
name="button-icon"
description="An icon button"
className="mb-4"
/>
```tsx showLineNumbers
<Button variant="outline" size="icon" aria-label="Submit">
<CircleFadingArrowUpIcon />
</Button>
```
<ComponentPreview styleName="base-nova" name="button-icon" />
### With Icon
The spacing between the icon and the text is automatically adjusted
based on the size of the button. You do not need any margin on the icon.
Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the icon for the correct spacing.
<ComponentPreview
styleName="base-nova"
name="button-with-icon"
description="A button with an icon"
className="mb-4"
/>
```tsx
<Button variant="outline" size="sm">
<IconGitBranch /> New Branch
</Button>
```
<ComponentPreview styleName="base-nova" name="button-with-icon" />
### Rounded
Use the `rounded-full` class to make the button rounded.
<ComponentPreview
styleName="base-nova"
name="button-rounded"
className="mb-4"
/>
```tsx
<Button variant="outline" size="icon" className="rounded-full">
<ArrowUpRightIcon />
</Button>
```
<ComponentPreview styleName="base-nova" name="button-rounded" />
### Spinner
<ComponentPreview
styleName="base-nova"
name="button-loading"
description="A button with a loading state."
className="mb-4"
/>
Render a `<Spinner />` component inside the button to show a loading state. Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the spinner for the correct spacing.
```tsx showLineNumbers
<Button size="sm" variant="outline" disabled>
<Spinner />
Submit
</Button>
```
<ComponentPreview styleName="base-nova" name="button-spinner" />
### Button Group
To create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/button-group) documentation for more details.
To create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/base/button-group) documentation for more details.
<ComponentPreview
styleName="base-nova"
name="button-group-demo"
className="mb-4"
/>
```tsx showLineNumbers
<ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="icon" aria-label="Go Back">
<ArrowLeftIcon />
</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Archive</Button>
<Button variant="outline">Report</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Snooze</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" aria-label="More Options">
<MoreHorizontalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent />
</DropdownMenu>
</ButtonGroup>
</ButtonGroup>
```
<ComponentPreview styleName="base-nova" name="button-group-demo" />
### Link
You can use the `asChild` prop to make another component look like a button. Here's an example of a link that looks like a button.
You can use the `render` prop on `<Button />` to make another component look like a button. Here's an example of a link that looks like a button.
```tsx showLineNumbers
import Link from "next/link"
import { Button } from "@/components/ui/button"
export function LinkAsButton() {
return (
<Button asChild>
<Link href="/login">Login</Link>
</Button>
)
}
```
<ComponentPreview styleName="base-nova" name="button-render" />
## API Reference
@@ -328,23 +151,3 @@ The `Button` component is a wrapper around the `button` element that adds a vari
| --------- | ----------------------------------------------------------------------------- | ----------- |
| `variant` | `"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"` | `"default"` |
| `size` | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"` | `"default"` |
| `asChild` | `boolean` | `false` |
## Changelog
### 2025-09-24 New sizes
We have added two new sizes to the button component: `icon-sm` and `icon-lg`. These sizes are used to create icon buttons. To add them, edit `button.tsx` and add the following code under `size` in `buttonVariants`:
```tsx showLineNumbers title="components/ui/button.tsx"
const buttonVariants = cva("...", {
variants: {
size: {
// ...
"icon-sm": "size-8",
"icon-lg": "size-10",
// ...
},
},
})
```

234
apps/v4/content/docs/components/radix/button.mdx
View File

@@ -6,28 +6,7 @@ base: radix
component: true
---
import { InfoIcon } from "lucide-react"
<Callout variant="info" icon={<InfoIcon />}>
**Updated:** We have updated the button component to add new sizes: `icon-sm` and `icon-lg`. See the
[changelog](/docs/components/button#changelog) for more details. Follow the
instructions to update your project.
</Callout>
<ComponentPreview
styleName="radix-nova"
name="button-demo"
description="A button"
className="mb-4"
/>
```tsx showLineNumbers
<Button variant="outline">Button</Button>
<Button variant="outline" size="icon" aria-label="Submit">
<ArrowUpIcon />
</Button>
```
<ComponentPreview styleName="radix-nova" name="button-demo" />
## Installation
@@ -100,223 +79,67 @@ If you want to keep the `cursor: pointer` behavior, add the following code to yo
### Size
<ComponentPreview styleName="radix-nova" name="button-size" className="mb-4" />
Use the `size` prop to change the size of the button.
```tsx
// Small
<Button size="sm" variant="outline">Small</Button>
<Button size="icon-sm" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
// Medium
<Button variant="outline">Default</Button>
<Button size="icon" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
// Large
<Button size="lg" variant="outline">Large</Button>
<Button size="icon-lg" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
```
<ComponentPreview styleName="radix-nova" name="button-size" />
### Default
<ComponentPreview
styleName="radix-nova"
name="button-default"
description="A primary button"
className="mb-4"
/>
```tsx
<Button>Button</Button>
```
<ComponentPreview styleName="radix-nova" name="button-default" />
### Outline
<ComponentPreview
styleName="radix-nova"
name="button-outline"
description="A button using the outline variant."
className="mb-4"
/>
```tsx
<Button variant="outline">Outline</Button>
```
<ComponentPreview styleName="radix-nova" name="button-outline" />
### Secondary
<ComponentPreview
styleName="radix-nova"
name="button-secondary"
description="A secondary button"
className="mb-4"
/>
```tsx
<Button variant="secondary">Secondary</Button>
```
<ComponentPreview styleName="radix-nova" name="button-secondary" />
### Ghost
<ComponentPreview
styleName="radix-nova"
name="button-ghost"
description="A button using the ghost variant"
className="mb-4"
/>
```tsx
<Button variant="ghost">Ghost</Button>
```
<ComponentPreview styleName="radix-nova" name="button-ghost" />
### Destructive
<ComponentPreview
styleName="radix-nova"
name="button-destructive"
description="A destructive button"
className="mb-4"
/>
```tsx
<Button variant="destructive">Destructive</Button>
```
<ComponentPreview styleName="radix-nova" name="button-destructive" />
### Link
<ComponentPreview
styleName="radix-nova"
name="button-link"
description="A button using the link variant."
className="mb-4"
/>
```tsx
<Button variant="link">Link</Button>
```
<ComponentPreview styleName="radix-nova" name="button-link" />
### Icon
<ComponentPreview
styleName="radix-nova"
name="button-icon"
description="An icon button"
className="mb-4"
/>
```tsx showLineNumbers
<Button variant="outline" size="icon" aria-label="Submit">
<CircleFadingArrowUpIcon />
</Button>
```
<ComponentPreview styleName="radix-nova" name="button-icon" />
### With Icon
The spacing between the icon and the text is automatically adjusted
based on the size of the button. You do not need any margin on the icon.
Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the icon for the correct spacing.
<ComponentPreview
styleName="radix-nova"
name="button-with-icon"
description="A button with an icon"
className="mb-4"
/>
```tsx
<Button variant="outline" size="sm">
<IconGitBranch /> New Branch
</Button>
```
<ComponentPreview styleName="radix-nova" name="button-with-icon" />
### Rounded
Use the `rounded-full` class to make the button rounded.
<ComponentPreview
styleName="radix-nova"
name="button-rounded"
className="mb-4"
/>
```tsx
<Button variant="outline" size="icon" className="rounded-full">
<ArrowUpRightIcon />
</Button>
```
<ComponentPreview styleName="radix-nova" name="button-rounded" />
### Spinner
<ComponentPreview
styleName="radix-nova"
name="button-loading"
description="A button with a loading state."
className="mb-4"
/>
Render a `<Spinner />` component inside the button to show a loading state. Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the spinner for the correct spacing.
```tsx showLineNumbers
<Button size="sm" variant="outline" disabled>
<Spinner />
Submit
</Button>
```
<ComponentPreview styleName="radix-nova" name="button-spinner" />
### Button Group
To create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/button-group) documentation for more details.
To create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/radix/button-group) documentation for more details.
<ComponentPreview
styleName="radix-nova"
name="button-group-demo"
className="mb-4"
/>
```tsx showLineNumbers
<ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="icon" aria-label="Go Back">
<ArrowLeftIcon />
</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Archive</Button>
<Button variant="outline">Report</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Snooze</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" aria-label="More Options">
<MoreHorizontalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent />
</DropdownMenu>
</ButtonGroup>
</ButtonGroup>
```
<ComponentPreview styleName="radix-nova" name="button-group-demo" />
### Link
You can use the `asChild` prop to make another component look like a button. Here's an example of a link that looks like a button.
You can use the `asChild` prop on `<Button />` to make another component look like a button. Here's an example of a link that looks like a button.
```tsx showLineNumbers
import Link from "next/link"
import { Button } from "@/components/ui/button"
export function LinkAsButton() {
return (
<Button asChild>
<Link href="/login">Login</Link>
</Button>
)
}
```
<ComponentPreview styleName="radix-nova" name="button-aschild" />
## API Reference
@@ -329,22 +152,3 @@ The `Button` component is a wrapper around the `button` element that adds a vari
| `variant` | `"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"` | `"default"` |
| `size` | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"` | `"default"` |
| `asChild` | `boolean` | `false` |
## Changelog
### 2025-09-24 New sizes
We have added two new sizes to the button component: `icon-sm` and `icon-lg`. These sizes are used to create icon buttons. To add them, edit `button.tsx` and add the following code under `size` in `buttonVariants`:
```tsx showLineNumbers title="components/ui/button.tsx"
const buttonVariants = cva("...", {
variants: {
size: {
// ...
"icon-sm": "size-8",
"icon-lg": "size-10",
// ...
},
},
})
```

212
apps/v4/examples/__index__.tsx
View File

@@ -538,16 +538,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-as-child": {
name: "button-as-child",
filePath: "examples/radix/button-as-child.tsx",
"button-aschild": {
name: "button-aschild",
filePath: "examples/radix/button-aschild.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/button-as-child")
const mod = await import("./radix/button-aschild")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-as-child"
) || "button-aschild"
return { default: mod.default || mod[exportName] }
}),
},
@@ -590,19 +590,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-examples": {
name: "button-examples",
filePath: "examples/radix/button-examples.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/button-examples")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-examples"
return { default: mod.default || mod[exportName] }
}),
},
"button-ghost": {
name: "button-ghost",
filePath: "examples/radix/button-ghost.tsx",
@@ -967,45 +954,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-icon-left": {
name: "button-icon-left",
filePath: "examples/radix/button-icon-left.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/button-icon-left")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-icon-left"
return { default: mod.default || mod[exportName] }
}),
},
"button-icon-only": {
name: "button-icon-only",
filePath: "examples/radix/button-icon-only.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/button-icon-only")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-icon-only"
return { default: mod.default || mod[exportName] }
}),
},
"button-icon-right": {
name: "button-icon-right",
filePath: "examples/radix/button-icon-right.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/button-icon-right")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-icon-right"
return { default: mod.default || mod[exportName] }
}),
},
"button-icon": {
name: "button-icon",
filePath: "examples/radix/button-icon.tsx",
@@ -1019,19 +967,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-invalid-states": {
name: "button-invalid-states",
filePath: "examples/radix/button-invalid-states.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/button-invalid-states")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-invalid-states"
return { default: mod.default || mod[exportName] }
}),
},
"button-link": {
name: "button-link",
filePath: "examples/radix/button-link.tsx",
@@ -1045,19 +980,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-loading": {
name: "button-loading",
filePath: "examples/radix/button-loading.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/button-loading")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-loading"
return { default: mod.default || mod[exportName] }
}),
},
"button-outline": {
name: "button-outline",
filePath: "examples/radix/button-outline.tsx",
@@ -1110,16 +1032,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-variants-and-sizes": {
name: "button-variants-and-sizes",
filePath: "examples/radix/button-variants-and-sizes.tsx",
"button-spinner": {
name: "button-spinner",
filePath: "examples/radix/button-spinner.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/button-variants-and-sizes")
const mod = await import("./radix/button-spinner")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-variants-and-sizes"
) || "button-spinner"
return { default: mod.default || mod[exportName] }
}),
},
@@ -7653,19 +7575,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-as-child": {
name: "button-as-child",
filePath: "examples/base/button-as-child.tsx",
component: React.lazy(async () => {
const mod = await import("./base/button-as-child")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-as-child"
return { default: mod.default || mod[exportName] }
}),
},
"button-default": {
name: "button-default",
filePath: "examples/base/button-default.tsx",
@@ -7705,19 +7614,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-examples": {
name: "button-examples",
filePath: "examples/base/button-examples.tsx",
component: React.lazy(async () => {
const mod = await import("./base/button-examples")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-examples"
return { default: mod.default || mod[exportName] }
}),
},
"button-ghost": {
name: "button-ghost",
filePath: "examples/base/button-ghost.tsx",
@@ -8082,45 +7978,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-icon-left": {
name: "button-icon-left",
filePath: "examples/base/button-icon-left.tsx",
component: React.lazy(async () => {
const mod = await import("./base/button-icon-left")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-icon-left"
return { default: mod.default || mod[exportName] }
}),
},
"button-icon-only": {
name: "button-icon-only",
filePath: "examples/base/button-icon-only.tsx",
component: React.lazy(async () => {
const mod = await import("./base/button-icon-only")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-icon-only"
return { default: mod.default || mod[exportName] }
}),
},
"button-icon-right": {
name: "button-icon-right",
filePath: "examples/base/button-icon-right.tsx",
component: React.lazy(async () => {
const mod = await import("./base/button-icon-right")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-icon-right"
return { default: mod.default || mod[exportName] }
}),
},
"button-icon": {
name: "button-icon",
filePath: "examples/base/button-icon.tsx",
@@ -8134,19 +7991,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-invalid-states": {
name: "button-invalid-states",
filePath: "examples/base/button-invalid-states.tsx",
component: React.lazy(async () => {
const mod = await import("./base/button-invalid-states")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-invalid-states"
return { default: mod.default || mod[exportName] }
}),
},
"button-link": {
name: "button-link",
filePath: "examples/base/button-link.tsx",
@@ -8160,19 +8004,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-loading": {
name: "button-loading",
filePath: "examples/base/button-loading.tsx",
component: React.lazy(async () => {
const mod = await import("./base/button-loading")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-loading"
return { default: mod.default || mod[exportName] }
}),
},
"button-outline": {
name: "button-outline",
filePath: "examples/base/button-outline.tsx",
@@ -8186,6 +8017,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-render": {
name: "button-render",
filePath: "examples/base/button-render.tsx",
component: React.lazy(async () => {
const mod = await import("./base/button-render")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-render"
return { default: mod.default || mod[exportName] }
}),
},
"button-rounded": {
name: "button-rounded",
filePath: "examples/base/button-rounded.tsx",
@@ -8225,16 +8069,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"button-variants-and-sizes": {
name: "button-variants-and-sizes",
filePath: "examples/base/button-variants-and-sizes.tsx",
"button-spinner": {
name: "button-spinner",
filePath: "examples/base/button-spinner.tsx",
component: React.lazy(async () => {
const mod = await import("./base/button-variants-and-sizes")
const mod = await import("./base/button-spinner")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "button-variants-and-sizes"
) || "button-spinner"
return { default: mod.default || mod[exportName] }
}),
},

6
apps/v4/examples/base/button-as-child.tsx
View File

@@ -1,6 +0,0 @@
import Link from "next/link"
import { Button } from "@/examples/base/ui/button"
export default function ButtonAsChild() {
return <Button render={<Link href="/login" />}>Login</Button>
}

24
apps/v4/examples/base/button-examples.tsx
View File

@@ -1,24 +0,0 @@
import { Button } from "@/examples/base/ui/button"
import { ArrowRightIcon } from "lucide-react"
export function ButtonExamples() {
return (
<div className="flex flex-wrap items-center gap-4">
<div className="flex items-center gap-2">
<Button variant="outline">Cancel</Button>
<Button>
Submit <ArrowRightIcon />
</Button>
</div>
<div className="flex items-center gap-2">
<Button variant="destructive">Delete</Button>
<Button size="icon">
<ArrowRightIcon />
</Button>
</div>
<Button render={<a href="#" />} nativeButton={false}>
Link
</Button>
</div>
)
}

2
apps/v4/examples/base/button-group-demo.tsx
View File

@@ -52,7 +52,7 @@ export default function ButtonGroupDemo() {
>
<MoreHorizontalIcon />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-52">
<DropdownMenuContent align="end" className="w-40">
<DropdownMenuGroup>
<DropdownMenuItem>
<MailCheckIcon />

89
apps/v4/examples/base/button-icon-left.tsx
View File

@@ -1,89 +0,0 @@
import { Button } from "@/examples/base/ui/button"
import { ArrowLeftCircleIcon } from "lucide-react"
export function ButtonIconLeft() {
return (
<>
<div className="flex flex-wrap items-center gap-2">
<Button size="xs">
<ArrowLeftCircleIcon /> Default
</Button>
<Button size="xs" variant="secondary">
<ArrowLeftCircleIcon /> Secondary
</Button>
<Button size="xs" variant="outline">
<ArrowLeftCircleIcon /> Outline
</Button>
<Button size="xs" variant="ghost">
<ArrowLeftCircleIcon /> Ghost
</Button>
<Button size="xs" variant="destructive">
<ArrowLeftCircleIcon /> Destructive
</Button>
<Button size="xs" variant="link">
<ArrowLeftCircleIcon /> Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="sm">
<ArrowLeftCircleIcon /> Default
</Button>
<Button size="sm" variant="secondary">
<ArrowLeftCircleIcon /> Secondary
</Button>
<Button size="sm" variant="outline">
<ArrowLeftCircleIcon /> Outline
</Button>
<Button size="sm" variant="ghost">
<ArrowLeftCircleIcon /> Ghost
</Button>
<Button size="sm" variant="destructive">
<ArrowLeftCircleIcon /> Destructive
</Button>
<Button size="sm" variant="link">
<ArrowLeftCircleIcon /> Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button>
<ArrowLeftCircleIcon /> Default
</Button>
<Button variant="secondary">
<ArrowLeftCircleIcon /> Secondary
</Button>
<Button variant="outline">
<ArrowLeftCircleIcon /> Outline
</Button>
<Button variant="ghost">
<ArrowLeftCircleIcon /> Ghost
</Button>
<Button variant="destructive">
<ArrowLeftCircleIcon /> Destructive
</Button>
<Button variant="link">
<ArrowLeftCircleIcon /> Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="lg">
<ArrowLeftCircleIcon /> Default
</Button>
<Button size="lg" variant="secondary">
<ArrowLeftCircleIcon /> Secondary
</Button>
<Button size="lg" variant="outline">
<ArrowLeftCircleIcon /> Outline
</Button>
<Button size="lg" variant="ghost">
<ArrowLeftCircleIcon /> Ghost
</Button>
<Button size="lg" variant="destructive">
<ArrowLeftCircleIcon /> Destructive
</Button>
<Button size="lg" variant="link">
<ArrowLeftCircleIcon /> Link
</Button>
</div>
</>
)
}

89
apps/v4/examples/base/button-icon-only.tsx
View File

@@ -1,89 +0,0 @@
import { Button } from "@/examples/base/ui/button"
import { ArrowRightIcon } from "lucide-react"
export function ButtonIconOnly() {
return (
<>
<div className="flex flex-wrap items-center gap-2">
<Button size="icon-xs">
<ArrowRightIcon />
</Button>
<Button size="icon-xs" variant="secondary">
<ArrowRightIcon />
</Button>
<Button size="icon-xs" variant="outline">
<ArrowRightIcon />
</Button>
<Button size="icon-xs" variant="ghost">
<ArrowRightIcon />
</Button>
<Button size="icon-xs" variant="destructive">
<ArrowRightIcon />
</Button>
<Button size="icon-xs" variant="link">
<ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="icon-sm">
<ArrowRightIcon />
</Button>
<Button size="icon-sm" variant="secondary">
<ArrowRightIcon />
</Button>
<Button size="icon-sm" variant="outline">
<ArrowRightIcon />
</Button>
<Button size="icon-sm" variant="ghost">
<ArrowRightIcon />
</Button>
<Button size="icon-sm" variant="destructive">
<ArrowRightIcon />
</Button>
<Button size="icon-sm" variant="link">
<ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="icon">
<ArrowRightIcon />
</Button>
<Button size="icon" variant="secondary">
<ArrowRightIcon />
</Button>
<Button size="icon" variant="outline">
<ArrowRightIcon />
</Button>
<Button size="icon" variant="ghost">
<ArrowRightIcon />
</Button>
<Button size="icon" variant="destructive">
<ArrowRightIcon />
</Button>
<Button size="icon" variant="link">
<ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="icon-lg">
<ArrowRightIcon />
</Button>
<Button size="icon-lg" variant="secondary">
<ArrowRightIcon />
</Button>
<Button size="icon-lg" variant="outline">
<ArrowRightIcon />
</Button>
<Button size="icon-lg" variant="ghost">
<ArrowRightIcon />
</Button>
<Button size="icon-lg" variant="destructive">
<ArrowRightIcon />
</Button>
<Button size="icon-lg" variant="link">
<ArrowRightIcon />
</Button>
</div>
</>
)
}

90
apps/v4/examples/base/button-icon-right.tsx
View File

@@ -1,90 +0,0 @@
import { Button } from "@/examples/base/ui/button"
import { ArrowRightIcon } from "lucide-react"
export function ButtonIconRight() {
return (
<>
<div className="flex flex-wrap items-center gap-2">
<Button size="xs">
Default <ArrowRightIcon />
</Button>
<Button size="xs" variant="secondary">
Secondary <ArrowRightIcon />
</Button>
<Button size="xs" variant="outline">
Outline <ArrowRightIcon />
</Button>
<Button size="xs" variant="ghost">
Ghost <ArrowRightIcon />
</Button>
<Button size="xs" variant="destructive">
Destructive <ArrowRightIcon />
</Button>
<Button size="xs" variant="link">
Link <ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="sm">
Default
<ArrowRightIcon />
</Button>
<Button size="sm" variant="secondary">
Secondary <ArrowRightIcon />
</Button>
<Button size="sm" variant="outline">
Outline <ArrowRightIcon />
</Button>
<Button size="sm" variant="ghost">
Ghost <ArrowRightIcon />
</Button>
<Button size="sm" variant="destructive">
Destructive <ArrowRightIcon />
</Button>
<Button size="sm" variant="link">
Link <ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button>
Default <ArrowRightIcon />
</Button>
<Button variant="secondary">
Secondary <ArrowRightIcon />
</Button>
<Button variant="outline">
Outline <ArrowRightIcon />
</Button>
<Button variant="ghost">
Ghost <ArrowRightIcon />
</Button>
<Button variant="destructive">
Destructive <ArrowRightIcon />
</Button>
<Button variant="link">
Link <ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="lg">
Default <ArrowRightIcon />
</Button>
<Button size="lg" variant="secondary">
Secondary <ArrowRightIcon />
</Button>
<Button size="lg" variant="outline">
Outline <ArrowRightIcon />
</Button>
<Button size="lg" variant="ghost">
Ghost <ArrowRightIcon />
</Button>
<Button size="lg" variant="destructive">
Destructive <ArrowRightIcon />
</Button>
<Button size="lg" variant="link">
Link <ArrowRightIcon />
</Button>
</div>
</>
)
}

86
apps/v4/examples/base/button-invalid-states.tsx
View File

@@ -1,86 +0,0 @@
import { Button } from "@/examples/base/ui/button"
export function ButtonInvalidStates() {
return (
<>
<div className="flex flex-wrap items-center gap-2">
<Button size="xs" aria-invalid="true">
Default
</Button>
<Button size="xs" variant="secondary" aria-invalid="true">
Secondary
</Button>
<Button size="xs" variant="outline" aria-invalid="true">
Outline
</Button>
<Button size="xs" variant="ghost" aria-invalid="true">
Ghost
</Button>
<Button size="xs" variant="destructive" aria-invalid="true">
Destructive
</Button>
<Button size="xs" variant="link" aria-invalid="true">
Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="sm" aria-invalid="true">
Default
</Button>
<Button size="sm" variant="secondary" aria-invalid="true">
Secondary
</Button>
<Button size="sm" variant="outline" aria-invalid="true">
Outline
</Button>
<Button size="sm" variant="ghost" aria-invalid="true">
Ghost
</Button>
<Button size="sm" variant="destructive" aria-invalid="true">
Destructive
</Button>
<Button size="sm" variant="link" aria-invalid="true">
Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button aria-invalid="true">Default</Button>
<Button variant="secondary" aria-invalid="true">
Secondary
</Button>
<Button variant="outline" aria-invalid="true">
Outline
</Button>
<Button variant="ghost" aria-invalid="true">
Ghost
</Button>
<Button variant="destructive" aria-invalid="true">
Destructive
</Button>
<Button variant="link" aria-invalid="true">
Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="lg" aria-invalid="true">
Default
</Button>
<Button size="lg" variant="secondary" aria-invalid="true">
Secondary
</Button>
<Button size="lg" variant="outline" aria-invalid="true">
Outline
</Button>
<Button size="lg" variant="ghost" aria-invalid="true">
Ghost
</Button>
<Button size="lg" variant="destructive" aria-invalid="true">
Destructive
</Button>
<Button size="lg" variant="link" aria-invalid="true">
Link
</Button>
</div>
</>
)
}

11
apps/v4/examples/base/button-loading.tsx
View File

@@ -1,11 +0,0 @@
import { Button } from "@/examples/base/ui/button"
import { Spinner } from "@/examples/base/ui/spinner"
export default function ButtonLoading() {
return (
<Button size="sm" variant="outline" disabled>
<Spinner />
Submit
</Button>
)
}

6
apps/v4/examples/base/button-render.tsx Normal file
View File

@@ -0,0 +1,6 @@
import Link from "next/link"
import { Button } from "@/examples/base/ui/button"
export default function ButtonRender() {
return <Button render={<Link href="#" />}>Login</Button>
}

3
apps/v4/examples/base/button-rounded.tsx
View File

@@ -3,7 +3,8 @@ import { ArrowUpIcon } from "lucide-react"
export default function ButtonRounded() {
return (
<div className="flex flex-col gap-8">
<div className="flex gap-2">
<Button className="rounded-full">Get Started</Button>
<Button variant="outline" size="icon" className="rounded-full">
<ArrowUpIcon />
</Button>

17
apps/v4/examples/base/button-spinner.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { Button } from "@/examples/base/ui/button"
import { Spinner } from "@/examples/base/ui/spinner"
export default function ButtonLoading() {
return (
<div className="flex gap-2">
<Button variant="outline" disabled>
<Spinner data-icon="inline-start" />
Generating
</Button>
<Button variant="secondary" disabled>
Downloading
<Spinner data-icon="inline-start" />
</Button>
</div>
)
}

70
apps/v4/examples/base/button-variants-and-sizes.tsx
View File

@@ -1,70 +0,0 @@
import { Button } from "@/examples/base/ui/button"
export function ButtonVariantsAndSizes() {
return (
<>
<div className="flex flex-wrap items-center gap-2">
<Button size="xs">Default</Button>
<Button size="xs" variant="secondary">
Secondary
</Button>
<Button size="xs" variant="outline">
Outline
</Button>
<Button size="xs" variant="ghost">
Ghost
</Button>
<Button size="xs" variant="destructive">
Destructive
</Button>
<Button size="xs" variant="link">
Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="sm">Default</Button>
<Button size="sm" variant="secondary">
Secondary
</Button>
<Button size="sm" variant="outline">
Outline
</Button>
<Button size="sm" variant="ghost">
Ghost
</Button>
<Button size="sm" variant="destructive">
Destructive
</Button>
<Button size="sm" variant="link">
Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="lg">Default</Button>
<Button size="lg" variant="secondary">
Secondary
</Button>
<Button size="lg" variant="outline">
Outline
</Button>
<Button size="lg" variant="ghost">
Ghost
</Button>
<Button size="lg" variant="destructive">
Destructive
</Button>
<Button size="lg" variant="link">
Link
</Button>
</div>
</>
)
}

14
apps/v4/examples/base/button-with-icon.tsx
View File

@@ -1,10 +1,16 @@
import { Button } from "@/examples/base/ui/button"
import { IconGitBranch } from "@tabler/icons-react"
import { IconGitBranch, IconGitFork } from "@tabler/icons-react"
export default function ButtonWithIcon() {
return (
<Button variant="outline" size="sm">
<IconGitBranch /> New Branch
</Button>
<div className="flex gap-2">
<Button variant="outline">
<IconGitBranch data-icon="inline-start" /> New Branch
</Button>
<Button variant="outline">
Fork
<IconGitFork data-icon="inline-end" />
</Button>
</div>
)
}

0
apps/v4/examples/radix/button-as-child.tsx → apps/v4/examples/radix/button-aschild.tsx
View File

21
apps/v4/examples/radix/button-examples.tsx
View File

@@ -1,21 +0,0 @@
import { Button } from "@/examples/radix/ui/button"
import { ArrowRightIcon } from "lucide-react"
export function ButtonExamples() {
return (
<div className="flex flex-wrap items-center gap-4">
<div className="flex items-center gap-2">
<Button variant="outline">Cancel</Button>
<Button>
Submit <ArrowRightIcon />
</Button>
</div>
<div className="flex items-center gap-2">
<Button variant="destructive">Delete</Button>
<Button size="icon">
<ArrowRightIcon />
</Button>
</div>
</div>
)
}

89
apps/v4/examples/radix/button-icon-left.tsx
View File

@@ -1,89 +0,0 @@
import { Button } from "@/examples/radix/ui/button"
import { ArrowLeftCircleIcon } from "lucide-react"
export function ButtonIconLeft() {
return (
<>
<div className="flex flex-wrap items-center gap-2">
<Button size="xs">
<ArrowLeftCircleIcon /> Default
</Button>
<Button size="xs" variant="secondary">
<ArrowLeftCircleIcon /> Secondary
</Button>
<Button size="xs" variant="outline">
<ArrowLeftCircleIcon /> Outline
</Button>
<Button size="xs" variant="ghost">
<ArrowLeftCircleIcon /> Ghost
</Button>
<Button size="xs" variant="destructive">
<ArrowLeftCircleIcon /> Destructive
</Button>
<Button size="xs" variant="link">
<ArrowLeftCircleIcon /> Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="sm">
<ArrowLeftCircleIcon /> Default
</Button>
<Button size="sm" variant="secondary">
<ArrowLeftCircleIcon /> Secondary
</Button>
<Button size="sm" variant="outline">
<ArrowLeftCircleIcon /> Outline
</Button>
<Button size="sm" variant="ghost">
<ArrowLeftCircleIcon /> Ghost
</Button>
<Button size="sm" variant="destructive">
<ArrowLeftCircleIcon /> Destructive
</Button>
<Button size="sm" variant="link">
<ArrowLeftCircleIcon /> Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button>
<ArrowLeftCircleIcon /> Default
</Button>
<Button variant="secondary">
<ArrowLeftCircleIcon /> Secondary
</Button>
<Button variant="outline">
<ArrowLeftCircleIcon /> Outline
</Button>
<Button variant="ghost">
<ArrowLeftCircleIcon /> Ghost
</Button>
<Button variant="destructive">
<ArrowLeftCircleIcon /> Destructive
</Button>
<Button variant="link">
<ArrowLeftCircleIcon /> Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="lg">
<ArrowLeftCircleIcon /> Default
</Button>
<Button size="lg" variant="secondary">
<ArrowLeftCircleIcon /> Secondary
</Button>
<Button size="lg" variant="outline">
<ArrowLeftCircleIcon /> Outline
</Button>
<Button size="lg" variant="ghost">
<ArrowLeftCircleIcon /> Ghost
</Button>
<Button size="lg" variant="destructive">
<ArrowLeftCircleIcon /> Destructive
</Button>
<Button size="lg" variant="link">
<ArrowLeftCircleIcon /> Link
</Button>
</div>
</>
)
}

89
apps/v4/examples/radix/button-icon-only.tsx
View File

@@ -1,89 +0,0 @@
import { Button } from "@/examples/radix/ui/button"
import { ArrowRightIcon } from "lucide-react"
export function ButtonIconOnly() {
return (
<>
<div className="flex flex-wrap items-center gap-2">
<Button size="icon-xs">
<ArrowRightIcon />
</Button>
<Button size="icon-xs" variant="secondary">
<ArrowRightIcon />
</Button>
<Button size="icon-xs" variant="outline">
<ArrowRightIcon />
</Button>
<Button size="icon-xs" variant="ghost">
<ArrowRightIcon />
</Button>
<Button size="icon-xs" variant="destructive">
<ArrowRightIcon />
</Button>
<Button size="icon-xs" variant="link">
<ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="icon-sm">
<ArrowRightIcon />
</Button>
<Button size="icon-sm" variant="secondary">
<ArrowRightIcon />
</Button>
<Button size="icon-sm" variant="outline">
<ArrowRightIcon />
</Button>
<Button size="icon-sm" variant="ghost">
<ArrowRightIcon />
</Button>
<Button size="icon-sm" variant="destructive">
<ArrowRightIcon />
</Button>
<Button size="icon-sm" variant="link">
<ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="icon">
<ArrowRightIcon />
</Button>
<Button size="icon" variant="secondary">
<ArrowRightIcon />
</Button>
<Button size="icon" variant="outline">
<ArrowRightIcon />
</Button>
<Button size="icon" variant="ghost">
<ArrowRightIcon />
</Button>
<Button size="icon" variant="destructive">
<ArrowRightIcon />
</Button>
<Button size="icon" variant="link">
<ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="icon-lg">
<ArrowRightIcon />
</Button>
<Button size="icon-lg" variant="secondary">
<ArrowRightIcon />
</Button>
<Button size="icon-lg" variant="outline">
<ArrowRightIcon />
</Button>
<Button size="icon-lg" variant="ghost">
<ArrowRightIcon />
</Button>
<Button size="icon-lg" variant="destructive">
<ArrowRightIcon />
</Button>
<Button size="icon-lg" variant="link">
<ArrowRightIcon />
</Button>
</div>
</>
)
}

90
apps/v4/examples/radix/button-icon-right.tsx
View File

@@ -1,90 +0,0 @@
import { Button } from "@/examples/radix/ui/button"
import { ArrowRightIcon } from "lucide-react"
export function ButtonIconRight() {
return (
<>
<div className="flex flex-wrap items-center gap-2">
<Button size="xs">
Default <ArrowRightIcon />
</Button>
<Button size="xs" variant="secondary">
Secondary <ArrowRightIcon />
</Button>
<Button size="xs" variant="outline">
Outline <ArrowRightIcon />
</Button>
<Button size="xs" variant="ghost">
Ghost <ArrowRightIcon />
</Button>
<Button size="xs" variant="destructive">
Destructive <ArrowRightIcon />
</Button>
<Button size="xs" variant="link">
Link <ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="sm">
Default
<ArrowRightIcon />
</Button>
<Button size="sm" variant="secondary">
Secondary <ArrowRightIcon />
</Button>
<Button size="sm" variant="outline">
Outline <ArrowRightIcon />
</Button>
<Button size="sm" variant="ghost">
Ghost <ArrowRightIcon />
</Button>
<Button size="sm" variant="destructive">
Destructive <ArrowRightIcon />
</Button>
<Button size="sm" variant="link">
Link <ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button>
Default <ArrowRightIcon />
</Button>
<Button variant="secondary">
Secondary <ArrowRightIcon />
</Button>
<Button variant="outline">
Outline <ArrowRightIcon />
</Button>
<Button variant="ghost">
Ghost <ArrowRightIcon />
</Button>
<Button variant="destructive">
Destructive <ArrowRightIcon />
</Button>
<Button variant="link">
Link <ArrowRightIcon />
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="lg">
Default <ArrowRightIcon />
</Button>
<Button size="lg" variant="secondary">
Secondary <ArrowRightIcon />
</Button>
<Button size="lg" variant="outline">
Outline <ArrowRightIcon />
</Button>
<Button size="lg" variant="ghost">
Ghost <ArrowRightIcon />
</Button>
<Button size="lg" variant="destructive">
Destructive <ArrowRightIcon />
</Button>
<Button size="lg" variant="link">
Link <ArrowRightIcon />
</Button>
</div>
</>
)
}

86
apps/v4/examples/radix/button-invalid-states.tsx
View File

@@ -1,86 +0,0 @@
import { Button } from "@/examples/radix/ui/button"
export function ButtonInvalidStates() {
return (
<>
<div className="flex flex-wrap items-center gap-2">
<Button size="xs" aria-invalid="true">
Default
</Button>
<Button size="xs" variant="secondary" aria-invalid="true">
Secondary
</Button>
<Button size="xs" variant="outline" aria-invalid="true">
Outline
</Button>
<Button size="xs" variant="ghost" aria-invalid="true">
Ghost
</Button>
<Button size="xs" variant="destructive" aria-invalid="true">
Destructive
</Button>
<Button size="xs" variant="link" aria-invalid="true">
Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="sm" aria-invalid="true">
Default
</Button>
<Button size="sm" variant="secondary" aria-invalid="true">
Secondary
</Button>
<Button size="sm" variant="outline" aria-invalid="true">
Outline
</Button>
<Button size="sm" variant="ghost" aria-invalid="true">
Ghost
</Button>
<Button size="sm" variant="destructive" aria-invalid="true">
Destructive
</Button>
<Button size="sm" variant="link" aria-invalid="true">
Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button aria-invalid="true">Default</Button>
<Button variant="secondary" aria-invalid="true">
Secondary
</Button>
<Button variant="outline" aria-invalid="true">
Outline
</Button>
<Button variant="ghost" aria-invalid="true">
Ghost
</Button>
<Button variant="destructive" aria-invalid="true">
Destructive
</Button>
<Button variant="link" aria-invalid="true">
Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="lg" aria-invalid="true">
Default
</Button>
<Button size="lg" variant="secondary" aria-invalid="true">
Secondary
</Button>
<Button size="lg" variant="outline" aria-invalid="true">
Outline
</Button>
<Button size="lg" variant="ghost" aria-invalid="true">
Ghost
</Button>
<Button size="lg" variant="destructive" aria-invalid="true">
Destructive
</Button>
<Button size="lg" variant="link" aria-invalid="true">
Link
</Button>
</div>
</>
)
}

11
apps/v4/examples/radix/button-loading.tsx
View File

@@ -1,11 +0,0 @@
import { Button } from "@/examples/radix/ui/button"
import { Spinner } from "@/examples/radix/ui/spinner"
export default function ButtonLoading() {
return (
<Button size="sm" variant="outline" disabled>
<Spinner />
Submit
</Button>
)
}

17
apps/v4/examples/radix/button-spinner.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { Button } from "@/examples/radix/ui/button"
import { Spinner } from "@/examples/radix/ui/spinner"
export default function ButtonSpinner() {
return (
<div className="flex gap-2">
<Button variant="outline" disabled>
<Spinner data-icon="inline-start" />
Generating
</Button>
<Button variant="secondary" disabled>
Downloading
<Spinner data-icon="inline-start" />
</Button>
</div>
)
}

70
apps/v4/examples/radix/button-variants-and-sizes.tsx
View File

@@ -1,70 +0,0 @@
import { Button } from "@/examples/radix/ui/button"
export function ButtonVariantsAndSizes() {
return (
<>
<div className="flex flex-wrap items-center gap-2">
<Button size="xs">Default</Button>
<Button size="xs" variant="secondary">
Secondary
</Button>
<Button size="xs" variant="outline">
Outline
</Button>
<Button size="xs" variant="ghost">
Ghost
</Button>
<Button size="xs" variant="destructive">
Destructive
</Button>
<Button size="xs" variant="link">
Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="sm">Default</Button>
<Button size="sm" variant="secondary">
Secondary
</Button>
<Button size="sm" variant="outline">
Outline
</Button>
<Button size="sm" variant="ghost">
Ghost
</Button>
<Button size="sm" variant="destructive">
Destructive
</Button>
<Button size="sm" variant="link">
Link
</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>
</div>
<div className="flex flex-wrap items-center gap-2">
<Button size="lg">Default</Button>
<Button size="lg" variant="secondary">
Secondary
</Button>
<Button size="lg" variant="outline">
Outline
</Button>
<Button size="lg" variant="ghost">
Ghost
</Button>
<Button size="lg" variant="destructive">
Destructive
</Button>
<Button size="lg" variant="link">
Link
</Button>
</div>
</>
)
}