NextUI 버튼 예시

이 섹션에서는 nextui 버튼을 볼 수 있습니다. NextUI는 반응 js 및 nextjs를 위한 최신 라이브러리입니다. 오늘 섹션에서는 다음 UI로 버튼 크기, nextui로 개요 버튼, nextui 아이콘으로 nextui, 반응 js 및 nextjs를 사용할 수 있는 NextUI 버튼을 만들 것입니다. 먼저 nextjs 또는 reactjs 프로젝트에 nextui를 설치 및 설정해야 합니다.
Install NextUI in NextJS with Typescript
Install NextUI in React with Typescript

NextUI 버튼 예시

NextUI 버튼의 크기는 미니, 소형, 중형, 대형 및 특대형입니다.

import { Button, Spacer } from "@nextui-org/react";

export default function App() {
  return (
    <>
      <Button size="xs">Mini</Button>
      <Spacer y={0.5} />
      <Button size="sm">Small</Button>
      <Spacer y={0.5} />
      <Button>Medium</Button>
      <Spacer y={0.5} />
      <Button size="lg">Large</Button>
      <Spacer y={0.5} />
      <Button size="xl">Xlarge</Button>
      <Spacer y={0.5} />
      <Button auto>Auto Width</Button>
    </>
  );
}

2.NextUI 버튼에는 기본 색상, 보조 색상, 성공, 오류 및 그래디언트 버튼 색상 등 다양한 색상이 있습니다.

import { Button, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={2}>
      <Grid>
        <Button color="primary" auto>
          Primary
        </Button>
      </Grid>
      <Grid>
        <Button color="secondary" auto>
          Secondary
        </Button>
      </Grid>
      <Grid>
        <Button color="success" auto>
          Success
        </Button>
      </Grid>
      <Grid>
        <Button color="warning" auto>
          Warning
        </Button>
      </Grid>
      <Grid>
        <Button color="error" auto>
          Error
        </Button>
      </Grid>
      <Grid>
        <Button color="gradient" auto>
          Gradient
        </Button>
      </Grid>
    </Grid.Container>
  );
}

3. 그림자가 있는 NextUI 버튼.

import { Button, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={2}>
      <Grid>
        <Button shadow color="primary" auto>
          Primary
        </Button>
      </Grid>
      <Grid>
        <Button shadow color="secondary" auto>
          Secondary
        </Button>
      </Grid>
      <Grid>
        <Button shadow color="success" auto>
          Success
        </Button>
      </Grid>
      <Grid>
        <Button shadow color="warning" auto>
          Warning
        </Button>
      </Grid>
      <Grid>
        <Button shadow color="error" auto>
          Error
        </Button>
      </Grid>
      <Grid>
        <Button shadow color="gradient" auto>
          Gradient
        </Button>
      </Grid>
    </Grid.Container>
  );
}

4.NextUI 로딩 버튼.

import { Button, Grid, Loading } from "@nextui-org/react";
export default function App() {
  return (
    <Grid.Container gap={2}>
      <Grid>
        <Button disabled auto bordered color="primary" css={{ px: "$13" }}>
          <Loading color="currentColor" size="sm" />
        </Button>
      </Grid>
      <Grid>
        <Button disabled auto bordered color="secondary" css={{ px: "$13" }}>
          <Loading type="spinner" color="currentColor" size="sm" />
        </Button>
      </Grid>
      <Grid>
        <Button disabled auto bordered color="success" css={{ px: "$13" }}>
          <Loading type="points" color="currentColor" size="sm" />
        </Button>
      </Grid>
      <Grid>
        <Button disabled auto bordered color="warning" css={{ px: "$13" }}>
          <Loading type="points-opacity" color="currentColor" size="sm" />
        </Button>
      </Grid>
    </Grid.Container>
  );
}

5.NextUI 테두리 윤곽선 버튼.

import { Button, Grid } from "@nextui-org/react";

export default function App() {
  return (
    <Grid.Container gap={2}>
      <Grid>
        <Button bordered color="primary" auto>
          Primary
        </Button>
      </Grid>
      <Grid>
        <Button bordered color="secondary" auto>
          Secondary
        </Button>
      </Grid>
      <Grid>
        <Button bordered color="success" auto>
          Success
        </Button>
      </Grid>
      <Grid>
        <Button bordered color="warning" auto>
          Warning
        </Button>
      </Grid>
      <Grid>
        <Button bordered color="error" auto>
          Error
        </Button>
      </Grid>
      <Grid>
        <Button bordered color="gradient" auto>
          Gradient
        </Button>
      </Grid>
    </Grid.Container>
  );
}

6. 아이콘이 있는 NextUI 버튼. 아이콘 버튼을 사용하려면 아이콘 파일을 만들고 아이콘 버튼을 사용하는 위치를 가져와야 합니다.
UserIcon.js 생성
UserIcon.js

export const UserIcon = ({
    fill = 'currentColor',
    filled,
    size,
    height,
    width,
    label,
    ...props
}) => {
    return (
        <svg
            data-name="Iconly/Curved/Profile"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width={size || width || 24}
            height={size || height || 24}
            {...props}
        >
            <g
                fill="none"
                stroke={fill}
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeMiterlimit={10}
                strokeWidth={1.5}
            >
                <path
                    data-name="Stroke 1"
                    d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
                />
                <path
                    data-name="Stroke 3"
                    d="M11.837 11.174a4.372 4.372 0 10-.031 0z"
                />
            </g>
        </svg>
    );
}

usericons 파일 button.jsx/button.tsx 가져오기

import { Button } from "@nextui-org/react";
import { UserIcon } from './UserIcon';

export default function Button() {
  return (
     <Button icon={<UserIcon />} color="error">
        Delete User
      </Button>
  );
}