folinhilo/defgov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mm

Browse Source
This commit is contained in:
folinhilo
2026-05-11 05:30:03 +08:00
parent eeda1e68e8
commit 33951a649b
48 changed files with 640 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
apps/vite-project/src/gallery/ButtonGallery.tsx Normal file
View File

@@ -0,0 +1,251 @@
import { Button, DownloadSvg } from "@defgov/ui-web-tw";
import { InnerWrapper } from "../common/InnerWrapper";
import { OuterWrapper } from "../common/OuterWrapper";
export const ButtonGallery = () => {
return (
<OuterWrapper>
<InnerWrapper>
<Button size="xs">xsmall</Button>
<Button size="xs" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button size="xs" iconSvg={<DownloadSvg />} iconOnly={true}>
xsmall
</Button>
<Button size="sm">small</Button>
<Button size="sm" iconSvg={<DownloadSvg />}>
small
</Button>
<Button size="sm" iconSvg={<DownloadSvg />} iconOnly={true}>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md">medium</Button>
<Button size="md" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button size="md" iconSvg={<DownloadSvg />} iconOnly={true}>
medium
</Button>
<Button size="lg">large</Button>
<Button size="lg" iconSvg={<DownloadSvg />}>
large
</Button>
<Button size="lg" iconSvg={<DownloadSvg />} iconOnly={true}>
large
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="xs" variant="outline">
xsmall
</Button>
<Button size="xs" variant="outline" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button
size="xs"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
xsmall
</Button>
<Button size="sm" variant="outline">
small
</Button>
<Button size="sm" variant="outline" iconSvg={<DownloadSvg />}>
small
</Button>
<Button
size="sm"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md" variant="outline">
medium
</Button>
<Button size="md" variant="outline" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button
size="md"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
medium
</Button>
<Button size="lg" variant="outline">
large
</Button>
<Button size="lg" variant="outline" iconSvg={<DownloadSvg />}>
large
</Button>
<Button
size="lg"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
large
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="xs" variant="subtle">
xsmall
</Button>
<Button size="xs" variant="subtle" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button
size="xs"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
xsmall
</Button>
<Button size="sm" variant="subtle">
small
</Button>
<Button size="sm" variant="subtle" iconSvg={<DownloadSvg />}>
small
</Button>
<Button
size="sm"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md" variant="subtle">
medium
</Button>
<Button size="md" variant="subtle" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button
size="md"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
medium
</Button>
<Button size="lg" variant="subtle">
large
</Button>
<Button size="lg" variant="subtle" iconSvg={<DownloadSvg />}>
large
</Button>
<Button
size="lg"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
large
</Button>
</InnerWrapper>
{/* ------------------------------------- */}
<InnerWrapper>
<Button size="xs" variant="ghost">
xsmall
</Button>
<Button size="xs" variant="ghost" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button
size="xs"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
xsmall
</Button>
<Button size="sm" variant="ghost">
small
</Button>
<Button size="sm" variant="ghost" iconSvg={<DownloadSvg />}>
small
</Button>
<Button
size="sm"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md" variant="ghost">
medium
</Button>
<Button size="md" variant="ghost" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button
size="md"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
medium
</Button>
<Button size="lg" variant="ghost">
large
</Button>
<Button size="lg" variant="ghost" iconSvg={<DownloadSvg />}>
large
</Button>
<Button
size="lg"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
large
</Button>
</InnerWrapper>
<InnerWrapper>
<Button variant="filled" brand="info">
button
</Button>
<Button variant="outline" brand="info">
button
</Button>
<Button variant="subtle" brand="info">
button
</Button>
<Button variant="ghost" brand="info">
button
</Button>
</InnerWrapper>
<InnerWrapper>
<Button variant="filled" disabled>
button
</Button>
<Button variant="outline" disabled>
button
</Button>
<Button variant="subtle" disabled>
button
</Button>
<Button variant="ghost" disabled>
button
</Button>
</InnerWrapper>
</OuterWrapper>
);
};