or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

Gradio Button

Gradio Button is a Svelte-based UI component library that provides versatile button functionality for Gradio applications. It offers comprehensive button capabilities with support for multiple variants, sizes, custom icons, link integration, and extensive styling options.

Package Information

Package Name: @gradio/button
Package Type: npm
Language: TypeScript/Svelte
Installation: npm install @gradio/button

Core Imports

import Button from "@gradio/button";
import { BaseButton } from "@gradio/button";

For standalone usage without Gradio integration:

import { BaseButton } from "@gradio/button";

Basic Usage

// Gradio-integrated button component
<script lang="ts">
  import Button from "@gradio/button";
  import type { Gradio } from "@gradio/utils";
  
  export let gradio: Gradio<{ click: never }>;
</script>

<Button
  value="Click me"
  variant="primary"
  size="lg"
  {gradio}
  on:click={() => console.log("Button clicked")}
/>

// Standalone button without Gradio integration
<script lang="ts">
  import { BaseButton } from "@gradio/button";
</script>

<BaseButton
  value="Standalone Button"
  variant="secondary"
  size="md" 
  on:click={() => console.log("BaseButton clicked")}
/>

Architecture

The @gradio/button package provides two main components:

Default Component (Button): Gradio-integrated button with automatic event dispatching through the Gradio framework
BaseButton Component: Standalone button component that can be used independently without Gradio integration
Link Support: Both components can render as links (<a>) when a URL is provided
Icon Integration: Built-in support for icons through the Gradio image system
Responsive Design: Flexible sizing and scaling with CSS custom properties

Capabilities

Gradio Button Component

Main Gradio-integrated button component with automatic event dispatching.

/**
 * Gradio-integrated button component
 * @component Button (default export)
 */
interface ButtonProps {
  /** HTML element ID */
  elem_id?: string;
  /** Array of CSS classes to apply */
  elem_classes?: string[];
  /** Controls button visibility */
  visible?: boolean;
  /** Button text content */
  value: string | null;
  /** Visual style variant */
  variant?: "primary" | "secondary" | "stop";
  /** Whether the button is interactive */
  interactive: boolean;
  /** Button size */
  size?: "sm" | "lg";
  /** Flex grow scale factor */
  scale?: number | null;
  /** Button icon */
  icon?: FileData | null;
  /** Link URL (renders as anchor if provided) */
  link?: string | null;
  /** Minimum width constraint */
  min_width?: number | undefined;
  /** Gradio integration object */
  gradio: Gradio<{ click: never }>;
}

Events:

click - Automatically dispatched through gradio.dispatch("click")

BaseButton Component

Standalone button component without Gradio integration.

/**
 * Standalone button component without Gradio integration
 * @component BaseButton
 */
interface BaseButtonProps {
  /** HTML element ID */
  elem_id?: string;
  /** Array of CSS classes to apply */
  elem_classes?: string[];
  /** Controls button visibility */
  visible?: boolean;
  /** Visual style variant */
  variant?: "primary" | "secondary" | "stop" | "huggingface";
  /** Button size */
  size?: "sm" | "md" | "lg";
  /** Button text content */
  value?: string | null;
  /** Link URL (renders as anchor if provided) */
  link?: string | null;
  /** Button icon */
  icon?: FileData | null;
  /** Whether the button is disabled */
  disabled?: boolean;
  /** Flex grow scale factor */
  scale?: number | null;
  /** Minimum width constraint */
  min_width?: number | undefined;
}

Events:

click - Standard Svelte click event forwarded via on:click

Slots:

Default slot for button content

Button Variants

type ButtonVariant = "primary" | "secondary" | "stop" | "huggingface";

primary - Primary button styling with brand colors
secondary - Default secondary button styling
stop - Stop/cancel button styling with warning colors
huggingface - Hugging Face branded styling (BaseButton only)

Button Sizes

type ButtonSize = "sm" | "md" | "lg";

sm - Small button with compact padding and text
md - Medium button (BaseButton only)
lg - Large button (default size)

Link Functionality

When the link prop is provided, the button renders as an anchor element (<a>) instead of a button element:

<BaseButton
  link="https://example.com"
  value="Visit Site"
  variant="primary"
/>
// Renders: <a href="https://example.com" rel="noopener noreferrer">Visit Site</a>

Link Security:

Automatically includes rel="noopener noreferrer" for external links
Supports disabled state via aria-disabled attribute
Maintains consistent styling between button and link modes

Icon Support

Icons are rendered using the Gradio Image component and support the FileData format:

interface FileData {
  /** File path - required for FileData class implementation */
  path: string;
  /** File URL for web access */
  url?: string;
  /** Original file name */
  orig_name?: string;
  /** File size in bytes */
  size?: number;
  /** File blob object */
  blob?: File;
  /** Whether this is a streaming file */
  is_stream?: boolean;
  /** MIME type */
  mime_type?: string;
  /** Alt text for accessibility */
  alt_text?: string;
  /** Base64 encoded data */
  b64?: string;
  /** Type metadata */
  readonly meta?: { _type: "gradio.FileData" };
}

Icon Usage:

const iconData: FileData = {
  path: "save-icon.svg",
  url: "data:image/svg+xml;base64,PHN2Zw...",
  mime_type: "image/svg+xml"
};

<BaseButton
  value="Save"
  icon={iconData}
  variant="primary"
/>

Responsive Scaling

interface ScalingOptions {
  /** Flex grow factor (null = no flex growth) */
  scale: number | null;
  /** Minimum width in pixels (with responsive calc) */
  min_width: number | undefined;
}

Scaling Behavior:

scale = null - No flex growth (default)
scale = 0 - Width set to fit-content
scale > 0 - Flex grow with specified factor
min_width - Generates min-width: calc(min(${min_width}px, 100%))

Gradio Integration

interface Gradio<T extends Record<string, any> = Record<string, any>> {
  /** Dispatch events to the Gradio framework */
  dispatch<E extends keyof T>(event_name: E, data?: T[E]): void;
}

type GradioButtonEvents = {
  click: never;
};

Integration Usage:

// The gradio object automatically handles event dispatching
gradio.dispatch("click"); // Called automatically on button click

State Management

interface ButtonState {
  /** Whether button accepts interactions */
  interactive: boolean; // Gradio Button only
  /** Whether button is disabled */
  disabled: boolean; // BaseButton only
  /** Whether button is visible */
  visible: boolean;
}

State Effects:

disabled = true - Adds opacity, grayscale filter, prevents interactions
visible = false - Hides button with display: none
interactive = false - Same effect as disabled = true (Gradio Button)

Usage Examples

Basic Button with Click Handler

<script lang="ts">
  import { BaseButton } from "@gradio/button";
  
  function handleClick() {
    console.log("Button was clicked!");
  }
</script>

<BaseButton
  value="Click Me"
  variant="primary"
  size="lg"
  on:click={handleClick}
/>

Button with Icon

<script lang="ts">
  import { BaseButton } from "@gradio/button";
  
  const saveIcon = {
    path: "save.svg",
    url: "data:image/svg+xml;base64,PHN2Zw...",
    mime_type: "image/svg+xml"
  };
</script>

<BaseButton
  value="Save Document"
  icon={saveIcon}
  variant="primary"
  size="md"
/>

Link Button

<BaseButton
  value="Learn More"
  link="https://gradio.app/docs"
  variant="secondary"
  size="lg"
/>

Responsive Button with Scaling

<BaseButton
  value="Flexible Button"
  scale={1}
  min_width={120}
  variant="primary"
/>

All Variants Showcase

<BaseButton value="Primary" variant="primary" />
<BaseButton value="Secondary" variant="secondary" />
<BaseButton value="Stop" variant="stop" />
<BaseButton value="Hugging Face" variant="huggingface" />

Disabled State

<BaseButton
  value="Cannot Click"
  variant="primary"
  disabled={true}
/>

Gradio Integration Example

<script lang="ts">
  import Button from "@gradio/button";
  import type { Gradio } from "@gradio/utils";
  
  export let gradio: Gradio<{ click: never }>;
  
  // Click events automatically dispatched to Gradio
</script>

<Button
  value="Submit"
  variant="primary"
  size="lg"
  interactive={true}
  {gradio}
/>