NextUI Buttons Example

In this section we will see nextui button. NextUI is modern library for react js and nextjs Today section we will create button size with next ui, outline button with nextui, nextui with icons nextui, NextUI button you can use react js and nextjs. first you need to install & setup nextui in you nextjs or reactjs project.

Install NextUI in React with Typescript

Install NextUI in NextJS with Typescript

NextUI Buttons Example

1. NextUI buttons size mini, small, medium, large and xlarge.

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>
    </>
  );
}

nextui buttons size

2. NextUI button with many colors primary color, secondary, success, errror and gradient button color.

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>
  );
}

nextui buttons colors

3. NextUI button with shadow.

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 Loading button.

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>
  );
}

nextui loading button

5. NextUI border outline button.

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>
  );
}

nextui outline button

6. NextUI button with icons. for using icon button you need to create icons file and import where you use icons buuton.

create 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>
    );
}

import usericons file 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>
  );
}

nextui buuton with icon