55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '../../../../ui-next/src/components/Button';
|
|
import ShowcaseRow from './ShowcaseRow';
|
|
|
|
/**
|
|
* ButtonShowcase component displays button variants and examples
|
|
*/
|
|
export default function ButtonShowcase() {
|
|
return (
|
|
<ShowcaseRow
|
|
title="Buttons"
|
|
description="Button components and size variants. Use the primary and secondary buttons in dialogs or screens where one action is required. In the Viewer application, use ghost button in panels where many different actions are available."
|
|
code={`
|
|
<Button variant="default">Primary Button</Button>
|
|
|
|
<Button variant="secondary">Secondary Button</Button>
|
|
|
|
<Button variant="ghost">Ghost Button</Button>
|
|
|
|
<Button variant="ghost" size="icon">?</Button>
|
|
|
|
<Button variant="link">Link</Button>
|
|
`}
|
|
>
|
|
<div className="flex flex-wrap gap-4">
|
|
<Button variant="default">Primary Button</Button>
|
|
<Button variant="secondary">Secondary Button</Button>
|
|
<Button variant="ghost">Ghost Button</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
>
|
|
?
|
|
</Button>
|
|
<Button variant="link">Link</Button>
|
|
</div>
|
|
<div className="mt-6 flex flex-wrap gap-4">
|
|
<Button
|
|
variant="default"
|
|
size="lg"
|
|
className="w-[107px]"
|
|
>
|
|
Large Button
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
>
|
|
Small Button
|
|
</Button>
|
|
</div>
|
|
</ShowcaseRow>
|
|
);
|
|
}
|