Netzo Logo

button

Displays a button or a component that looks like a button.

shadcn/ui radix-ui Storybook Figma

Usage

After installation components can be imported and used directly.

import { Button, buttonVariants } from 'netzo/components/button.tsx'

Examples

Working examples to copy-paste into projects under components/.

Default

import { Button } from "netzo/components/button.tsx";

export default () => {
  return <Button>Button</Button>;
};

As Child

import { Button } from "netzo/components/button.tsx";

export default () => {
  return (
    <Button asChild>
      <a href="/login">Login</a>
    </Button>
  );
};

Destructive

import { Button } from "netzo/components/button.tsx";

export default () => {
  return <Button variant="destructive">Destructive</Button>;
};

Ghost

import { Button } from "netzo/components/button.tsx";

export default () => {
  return <Button variant="ghost">Ghost</Button>;
};

Icon

import { Button } from "netzo/components/button.tsx";

export default () => {
  return (
    <Button variant="outline" size="icon">
      <i className="mdi-chevron-right h-4 w-4" />
    </Button>
  );
};
import { Button } from "netzo/components/button.tsx";

export default () => {
  return <Button variant="link">Link</Button>;
};

Loading

import { Button } from "netzo/components/button.tsx";

export default () => {
  return (
    <Button disabled>
      <i className="mdi-reload mr-2 h-4 w-4 animate-spin" />
      Please wait
    </Button>
  );
};

Outline

import { Button } from "netzo/components/button.tsx";

export default () => {
  return <Button variant="outline">Outline</Button>;
};

Secondary

import { Button } from "netzo/components/button.tsx";

export default () => {
  return <Button variant="secondary">Secondary</Button>;
};

With Icon

import { Button } from "netzo/components/button.tsx";

export default () => {
  return (
    <Button>
      <i className="mdi-email-open mr-2 h-4 w-4" /> Login with Email
    </Button>
  );
};