IconButton

Preview

import IconButton from "@repo/ui/IconButton";
import { Activity } from "lucide-react";

<IconButton>
  <Activity size={18} />
</IconButton>;

Installation

npx the-dig@latest add IconButton

Props

Prop	Type	Default
variant	"contained" | "tinted" | "outlined"	"contained"
color	"brand" | "info" | "success" | "warning" | "danger" | "gray"	"brand"
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"
isLoading	boolean	false
className	string	-
Others	ButtonHTMLAttributes<HTMLButtonElement> (e.g. onClick, disabled, etc.)	Document

Variants and Colors

Brand

import IconButton from "@repo/ui/IconButton";
import { Activity } from "lucide-react";

<IconButton variant="contained" color="brand">
  <Activity size={18} />
</IconButton>
<IconButton variant="tinted" color="brand">
  <Activity size={18} />
</IconButton>
<IconButton variant="outlined" color="brand">
  <Activity size={18} />
</IconButton>

Info

import IconButton from "@repo/ui/IconButton";
import { Activity } from "lucide-react";

<IconButton variant="contained" color="info">
  <Activity size={18} />
</IconButton>
<IconButton variant="tinted" color="info">
  <Activity size={18} />
</IconButton>
<IconButton variant="outlined" color="info">
  <Activity size={18} />
</IconButton>

Success

import IconButton from "@repo/ui/IconButton";
import { Activity } from "lucide-react";

<IconButton variant="contained" color="success">
  <Activity size={18} />
</IconButton>
<IconButton variant="tinted" color="success">
  <Activity size={18} />
</IconButton>
<IconButton variant="outlined" color="success">
  <Activity size={18} />
</IconButton>

Warning

import IconButton from "@repo/ui/IconButton";
import { Activity } from "lucide-react";

<IconButton variant="contained" color="warning">
  <Activity size={18} />
</IconButton>
<IconButton variant="tinted" color="warning">
  <Activity size={18} />
</IconButton>
<IconButton variant="outlined" color="warning">
  <Activity size={18} />
</IconButton>

Danger

import IconButton from "@repo/ui/IconButton";
import { Activity } from "lucide-react";

<IconButton variant="contained" color="danger">
  <Activity size={18} />
</IconButton>
<IconButton variant="tinted" color="danger">
  <Activity size={18} />
</IconButton>
<IconButton variant="outlined" color="danger">
  <Activity size={18} />
</IconButton>

Gray

import IconButton from "@repo/ui/IconButton";
import { Activity } from "lucide-react";

<IconButton variant="contained" color="gray">
  <Activity size={18} />
</IconButton>
<IconButton variant="tinted" color="gray">
  <Activity size={18} />
</IconButton>
<IconButton variant="outlined" color="gray">
  <Activity size={18} />
</IconButton>

Sizes

import IconButton from "@repo/ui/IconButton";
import { Activity } from "lucide-react";

<IconButton size="xs">
  <Activity size={18} />
</IconButton>
<IconButton size="sm">
  <Activity size={18} />
</IconButton>
<IconButton size="md">
  <Activity size={18} />
</IconButton>
<IconButton size="lg">
  <Activity size={18} />
</IconButton>
<IconButton size="xl">
  <Activity size={18} />
</IconButton>