---
sidebar_position: 3
---

import { Button, Badge, ActionIcon } from "rizzui";
import {
  BellIcon,
  BoltIcon,
  HeartIcon,
  HandThumbUpIcon,
  ChatBubbleOvalLeftIcon,
} from "@heroicons/react/24/outline";
import Paper from "@site/src/components/paper";
import ColorTokens from "@site/src/components/color-tokens";

# Theming

Theming plays a vital role in the development of applications, offering a powerful mechanism to enhance user experience and visual appeal. This documentation explores the significance of theming, guiding you through the process of implementing and customizing themes to elevate the overall aesthetics and usability of your application.

## Theme Tokens

Customize your color token for light and dark mode theme. Click on the color box, choose your color and then copy & paste it to your **global.css** file.

<ColorTokens />

## Variant prop

<Paper isOpen>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap">
    <Button variant="text">Button</Button>
    <Button variant="outline">Button</Button>
    <Button variant="flat">Button</Button>
    <Button>Button</Button>
  </div>
</Paper>

```tsx
import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Button variant="text">Button</Button>
      <Button variant="outline">Button</Button>
      <Button variant="flat">Button</Button>
      <Button>Button</Button>
    </>
  );
}
```

## Color prop

<Paper isOpen>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap mb-10">
    <Badge>Badge</Badge>
    <Badge color="secondary">Badge</Badge>
    <Badge color="info">Badge</Badge>
    <Badge color="warning">Badge</Badge>
    <Badge color="danger">Badge</Badge>
    <Badge color="success">Badge</Badge>
  </div>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap mb-10">
    <Badge variant="flat">Badge</Badge>
    <Badge
      variant="flat"
      color="secondary"
    >
      Badge
    </Badge>
    <Badge
      variant="flat"
      color="info"
    >
      Badge
    </Badge>
    <Badge
      variant="flat"
      color="warning"
    >
      Badge
    </Badge>
    <Badge
      variant="flat"
      color="danger"
    >
      Badge
    </Badge>
    <Badge
      variant="flat"
      color="success"
    >
      Badge
    </Badge>
  </div>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap mb-5">
    <Badge variant="outline">Badge</Badge>
    <Badge
      variant="outline"
      color="secondary"
    >
      Badge
    </Badge>
    <Badge
      variant="outline"
      color="info"
    >
      Badge
    </Badge>
    <Badge
      variant="outline"
      color="warning"
    >
      Badge
    </Badge>
    <Badge
      variant="outline"
      color="danger"
    >
      Badge
    </Badge>
    <Badge
      variant="outline"
      color="success"
    >
      Badge
    </Badge>
  </div>
</Paper>

```tsx
import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Badge>Badge</Badge>
      <Badge color="secondary">Badge</Badge>
      <Badge color="info">Badge</Badge>
      <Badge color="warning">Badge</Badge>
      <Badge color="danger">Badge</Badge>
      <Badge color="success">Badge</Badge>
      ... {/* flat & outline variant */}
    </>
  );
}
```

## Rounded prop

Checkout tailwind [borderRadius](https://tailwindcss.com/docs/theme#core-plugins) doc for customization.

<Paper isOpen>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap">
    <ActionIcon rounded="none">
      <BoltIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon rounded="sm">
      <HandThumbUpIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon>
      <HeartIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon rounded="lg">
      <ChatBubbleOvalLeftIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon rounded="full">
      <BellIcon className="w-5 h-5" />
    </ActionIcon>
  </div>
</Paper>

```tsx
import { ActionIcon } from "rizzui";
import {
  BellIcon,
  BoltIcon,
  HeartIcon,
  HandThumbUpIcon,
  ChatBubbleOvalLeftIcon,
} from "@heroicons/react/24/outline";

export default function App() {
  return (
    <>
      <ActionIcon rounded="none">
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon rounded="sm">
        <HandThumbUpIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon>
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon rounded="lg">
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon rounded="full">
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
    </>
  );
}
```
