CellTypeButton

Styled buttons for different notebook cell types. Each cell type has a distinct color scheme for visual differentiation. Includes convenience components for each cell type.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/cell-type-button.json

Copy from the nteract/elements registry.

Requires the Button component from the nteract registry.

Usage

import { CellTypeButton, CodeCellButton, MarkdownCellButton } from "@/registry/cell/CellTypeButton"

export function Example() {
  return (
    <div className="flex gap-2">
      <CellTypeButton cellType="code" />
      <CodeCellButton />
      <MarkdownCellButton />
    </div>
  )
}

All Cell Types

Each cell type has a distinct color scheme:

<CellTypeButton cellType="code" />     // Gray
<CellTypeButton cellType="markdown" /> // Yellow
<CellTypeButton cellType="sql" />      // Blue
<CellTypeButton cellType="ai" />       // Purple

Convenience Components

Pre-configured components for each cell type:

CodeCellButton

<CodeCellButton />

MarkdownCellButton

<MarkdownCellButton />

SqlCellButton

<SqlCellButton />

AiCellButton

<AiCellButton />

With Plus Icon

Show a plus icon for "add cell" actions:

<CodeCellButton showPlus />
<MarkdownCellButton showPlus />

Without Icon

Hide the cell type icon:

<CodeCellButton showIcon={false} />
<MarkdownCellButton showIcon={false} />

Custom Labels

Override the default label:

<CellTypeButton cellType="code" label="Python" />
<CellTypeButton cellType="ai" label="GPT-4" />

Sizes

Supports all Button sizes:

<CodeCellButton size="xs" />
<CodeCellButton size="sm" />
<CodeCellButton size="default" />
<CodeCellButton size="lg" />

Props

CellTypeButton

Prop	Type	Default	Description
`cellType`	`"code" \| "markdown" \| "sql" \| "ai"`	Required	The type of cell
`showIcon`	`boolean`	`true`	Show the cell type icon
`showPlus`	`boolean`	`false`	Show a plus icon (for add actions)
`label`	`string`	Cell type name	Custom button label
`size`	`"default" \| "xs" \| "sm" \| "lg"`	`"default"`	Button size
`className`	`string`	—	Additional CSS classes
`...props`	`ButtonProps`	—	All standard Button props

Convenience Components

CodeCellButton, MarkdownCellButton, SqlCellButton, and AiCellButton accept all props except cellType.

Exported Types

export type CellType = "code" | "markdown" | "sql" | "ai";
export const cellTypeStyles: Record<CellType, string>;

CellTypeButton

On this page