Implementation:TobikoData Sqlmesh Common Button
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Components |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
A fully-featured button component with six visual variants, seven sizes, and comprehensive accessibility support.
Description
The Button component is a React button built on Radix UI's Slot primitive with extensive customization options. It provides six semantic variants (primary, secondary, alternative, destructive, danger, transparent) each with distinct hover and active states. The component includes focus-visible ring styling for keyboard accessibility, proper disabled state handling, and supports the asChild pattern for composition with other elements. Built with class-variance-authority for type-safe variant management.
Usage
Use Button for all interactive actions in the UI. Choose variants based on action importance (primary for main actions, destructive/danger for removal actions, secondary/alternative for less prominent actions, transparent for minimal styling). The component handles focus management, disabled states, and provides consistent interaction feedback across all variants.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/common/src/components/Button/Button.tsx
Signature
export type ButtonVariant =
| 'primary'
| 'secondary'
| 'alternative'
| 'destructive'
| 'danger'
| 'transparent'
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: ButtonVariant
size?: Size
shape?: Shape
asChild?: boolean
}
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, disabled, size, asChild = false, ...props }, ref) => {
// Implementation
},
)
Import
import { Button } from '@sqlmesh-common/components/Button/Button'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| variant | ButtonVariant | No | 'secondary' | 'alternative' | 'destructive' | 'danger' | 'transparent' (default: 'primary') |
| size | Size | No | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' (default: 's') |
| shape | Shape | No | 'round' | 'pill' (default: 'round') |
| asChild | boolean | No | If true, renders as Slot for composition (default: false) |
| disabled | boolean | No | Disables the button and applies disabled styling |
| className | string | No | Additional CSS classes |
| children | React.ReactNode | No | Button content |
| ref | React.Ref<HTMLButtonElement> | No | Forward ref to button element |
Outputs
| Name | Type | Description |
|---|---|---|
| element | React.ReactElement | Styled button or Slot element with variant styling |
Usage Examples
// Primary action button (default)
<Button onClick={handleSubmit}>Submit</Button>
// Different variants
<Button variant="secondary">Cancel</Button>
<Button variant="destructive">Delete Item</Button>
<Button variant="danger">Remove All</Button>
<Button variant="alternative">More Options</Button>
<Button variant="transparent">Skip</Button>
// Custom sizes
<Button size="xs">Compact</Button>
<Button size="l">Large Button</Button>
// Disabled state
<Button disabled>Cannot Click</Button>
// With icons
<Button variant="primary" size="m">
<SaveIcon />
Save Changes
</Button>
// Composition with asChild
<Button asChild variant="secondary">
<a href="/download">Download</a>
</Button>