Button

A control that can be used to trigger an action.
Properties
disabled
variant
size
children
icon
iconRight
loading
Example
Source Code
Installation
"use client";

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

function ButtonExample() {
  return (
    <Button
      disabled={false}
      variant="brand-primary"
      size="medium"
      icon={null}
      iconRight={null}
      loading={false}
      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
    >
      Button
    </Button>
  );
}

export default ButtonExample;

Props

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"
"brand-primary"
size
"large" | "medium" | "small"
"medium"
children
string
"Button"
icon
IconName
null
iconRight
IconName
null
loading
boolean
false
onClick
(event: React.MouseEvent<HTMLButtonElement>) => void

Examples

Variants

Icon

Disabled

Loading

Sizes