Button

Button is used to trigger an action or event when clicked.

import { Button } from "@/components/ui/button";

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

Installation

npx nore-ui-cli@latest add button

Usage

import { Button } from "@/components/ui/button";

<Button variant="outline">Button</Button>

Examples

Variant

import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";

export default function ButtonVariant() {
  return (
    <styled.div css={{ display: "flex", alignItems: "center", gap: "4" }}>
      <Button variant="primary">Button</Button>
      <Button variant="secondary">Button</Button>
      <Button variant="outline">Button</Button>
      <Button variant="ghost">Button</Button>
      <Button variant="input">Button</Button>
    </styled.div>
  );
}

Size

import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";

export default function ButtonSize() {
  return (
    <styled.div css={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: "4" }}>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </styled.div>
  );
}

Loading

import { Button } from "@/components/ui/button";

export default function ButtonLoading() {
  return <Button loading>Submit</Button>;
}

Link

You can use button recipe to create a link that looks like a button.

Link

import Link from "next/link";
import { button } from "styled-system/recipes";

export default function ButtonLink() {
  return (
    <Link className={button({ variant: "outline" })} href="/docs/components/button">
      Link
    </Link>
  );
}

As Child

Label

import { Button } from "@/components/ui/button";

export default function ButtonAsChild() {
  return (
    <Button asChild>
      <label>Label</label>
    </Button>
  );
}