buttons.tsx

import { Button, View } from '@/ui';

import { Title } from './title';

export const Buttons = () => (
  <>
    <Title text="Buttons" />
    <View>
      <View className="flex-row  flex-wrap">
        <Button label="small" size="sm" className="mr-2" />
        <Button label="small" loading size="sm" className="mr-2 min-w-[60px]" />
        <Button label="small" size="sm" variant="secondary" className="mr-2" />
        <Button label="small" size="sm" variant="outline" className="mr-2" />
        <Button
          label="small"
          size="sm"
          variant="destructive"
          className="mr-2"
        />
        <Button label="small" size="sm" variant="ghost" className="mr-2" />
        <Button label="small" size="sm" disabled className="mr-2" />
      </View>
      <Button label="Default Button" />
      <Button label="Secondary Button" variant="secondary" />
      <Button label="Outline Button" variant="outline" />
      <Button label="Destructive Button" variant="destructive" />
      <Button label="Ghost Button" variant="ghost" />
      <Button label="Button" loading={true} />
      <Button label="Button" loading={true} variant="outline" />
      <Button label="Default Button Disabled" disabled />
      <Button label="Secondary Button Disabled" disabled variant="secondary" />
    </View>
  </>
);