Icon Button

A button that displays an icon.
Properties
disabled
variant
size
icon
loading
Example
Source Code
Installation
"use client";

import React from "react";
import { IconButton } from "@/subframe/components/IconButton";

function IconButtonExample() {
  return (
    <IconButton
      disabled={false}
      variant="neutral-tertiary"
      size="medium"
      icon="FeatherPlus"
      loading={false}
      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
    />
  );
}

export default IconButtonExample;

Props

Icon Button
Prop
Type
Default
Additional info
disabled
boolean
false
variant
"brand-primary" | "brand-secondary" | "brand-tertiary" | "neutral-primary" | "neutral-secondary" | "neutral-tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "inverse"
"neutral-tertiary"
size
"large" | "medium" | "small"
"medium"
icon
IconName
"FeatherPlus"
loading
boolean
false
onClick
(event: React.MouseEvent<HTMLButtonElement>) => void

Examples

Variants

Disabled

Loading

Sizes