admin/components/consumer/consumerButtonTypes.ts
alisaza e1eaf5eff5 feat: initial ghabilee-admin backoffice app
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js
app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
2026-09-05 13:12:59 +03:30

52 lines
1.6 KiB
TypeScript

import type { CSSProperties, ReactNode } from 'react'
/** Figma fill: #F68B1F | #1C2473 | #ED1C24 | #007839 | #F5F5F5 | transparent */
export type ConsumerButtonFill = 'orange' | 'navy' | 'fourth' | 'fifth' | 'gray' | 'none'
/** Figma radius: pill or 10px control */
export type ConsumerButtonRadius = 'full' | 'control'
/** Button height tokens — see `consumer-ui-guidelines.md` (scale differs from ConsumerInput). */
export type ConsumerButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
/** Content alignment inside the button (RTL: `start` = right) */
export type ConsumerButtonAlign = 'center' | 'start'
export type ConsumerButtonIconPosition = 'start' | 'end'
export interface ConsumerButtonProps {
'aria-controls'?: string
'aria-expanded'?: boolean | 'true' | 'false'
'aria-label'?: string
'aria-pressed'?: boolean | 'true' | 'false'
'aria-checked'?: boolean | 'true' | 'false'
'aria-selected'?: boolean | 'true' | 'false'
align?: ConsumerButtonAlign
children?: ReactNode
className?: string
radius?: ConsumerButtonRadius
disabled?: boolean
fill?: ConsumerButtonFill
fontSize?: number
fullWidth?: boolean
icon?: ReactNode
iconEnd?: ReactNode
iconOnly?: boolean
iconPosition?: ConsumerButtonIconPosition
iconStart?: ReactNode
isLoading?: boolean
role?: React.AriaRole
size?: ConsumerButtonSize
target?: '_blank' | '_self'
/** Preset white, Tailwind class (e.g. `text-primary`), or hex (e.g. `#333A44`). */
textColor?: 'white' | (string & {})
to?: string
type?: 'button' | 'submit' | 'reset'
onClick?: () => void
}
export interface ResolvedConsumerButtonStyle {
className: string
style: CSSProperties
}