@manta-eu/react/button

Type Aliases

BaseButtonProps

BaseButtonProps = Omit<ComponentProps<"button">, "children"> & VariantPropsOf<typeof buttonConfig> & object

Type Declaration

asChild?

optional asChild?: boolean

isLoading?

optional isLoading?: boolean

---

BaseLinkProps

BaseLinkProps = object

Properties

component?

optional component?: ElementType

href

href: string

rounded?

optional rounded?: VariantPropsOf<typeof buttonConfig>["rounded"]

size?

optional size?: VariantPropsOf<typeof buttonConfig>["size"]

variant?

optional variant?: VariantPropsOf<typeof buttonConfig>["variant"]

---

ButtonProps

ButtonProps = (IconOnlyButtonProps | RegularButtonProps) & object

Type Declaration

ref?

optional ref?: Ref<HTMLButtonElement>

---

ButtonVariant

ButtonVariant = VariantPropsOf<typeof buttonConfig>["variant"]

---

IconOnlyButtonProps

IconOnlyButtonProps = BaseButtonProps & object

Type Declaration

aria-label

aria-label: string

children?

optional children?: never

icon

icon: ComponentType<{ className?: string; }>

iconOnly

iconOnly: true

label?

optional label?: never

showLeftIcon?

optional showLeftIcon?: never

showRightIcon?

optional showRightIcon?: never

---

LinkProps

LinkProps = Omit<ComponentPropsWithoutRef<"a">, "href"> & BaseLinkProps & object

Type Declaration

ref?

optional ref?: Ref<HTMLAnchorElement>

---

RegularButtonProps

RegularButtonProps = BaseButtonProps & object

Type Declaration

children?

optional children?: ReactNode

icon?

optional icon?: ComponentType<{ className?: string; }>

iconOnly?

optional iconOnly?: false | never

label?

optional label?: string

showLeftIcon?

optional showLeftIcon?: boolean

showRightIcon?

optional showRightIcon?: boolean

Variables

buttonConfig

const buttonConfig: object

Type Declaration

base

base: string[]

defaultVariants

defaultVariants: object

defaultVariants.rounded

readonly rounded: "full" = "full"

defaultVariants.size

readonly size: "base" = "base"

defaultVariants.variant

readonly variant: "primary" = "primary"

variants

variants: object

variants.rounded

rounded: object

variants.rounded.full

full: string = "rounded-full"

variants.rounded.lg

lg: string = "rounded-lg-v4"

variants.rounded.md

md: string = "rounded-md-v4"

variants.rounded.sm

sm: string = "rounded-sm-v4"

variants.size

size: object

variants.size.base

base: string = "h-10 px-4 typography-caption-medium [&>svg]:size-5 [&_svg[data-loader]]:size-5"

variants.size.lg

lg: string = "h-12 px-4 typography-body-medium [&>svg]:size-6 [&_svg[data-loader]]:size-6"

variants.size.sm

sm: string = "h-8 px-3 typography-tiny-medium [&>svg]:size-5 [&_svg[data-loader]]:size-4"

variants.size.xs

xs: string = "h-7 px-2 typography-tiny-medium [&>svg]:size-4 [&_svg[data-loader]]:size-3.5"

variants.variant

variant: object

variants.variant.destructive

destructive: string = "bg-error text-error-foreground hover:bg-error-hover focus:ring-error-foreground/25"

variants.variant.ghost

ghost: string = "bg-transparent hover:bg-faint"

variants.variant.primary

primary: string = "bg-primary text-primary-foreground hover:bg-primary-hover"

variants.variant.secondary

secondary: string = "bg-secondary text-secondary-foreground hover:bg-secondary-hover"

variants.variant.tertiary

tertiary: string = "bg-input text-default-foreground border border-muted-border hover:bg-input-hover focus:border-active-border"

---

buttonIconOnlySizeClasses

const buttonIconOnlySizeClasses: object

Type Declaration

base

base: string = "has-[>svg:only-child]:size-10 has-[>svg:only-child]:p-0 "

lg

lg: string = "has-[>svg:only-child]:size-12 has-[>svg:only-child]:p-0 "

sm

sm: string = "has-[>svg:only-child]:size-8 has-[>svg:only-child]:p-0 "

xs

xs: string = "has-[>svg:only-child]:size-7 has-[>svg:only-child]:p-0 "

Functions

Button()

Button(props): Element

Parameters

props

ButtonProps

Returns

Element

---

buttonVariants()

buttonVariants(props?): string

Parameters

props?

VariantPropsOf<{ base: string[]; variants: { variant: { primary: string; secondary: string; tertiary: string; ghost: string; destructive: string; }; size: { xs: string; sm: string; base: string; lg: string; }; rounded: { …; }; }; defaultVariants: { …; }; }> & ClassProp

Returns

string

---

Link()

Link(props): Element

Parameters

props

LinkProps

Returns

Element

---

wrapTextChildren()

wrapTextChildren(children): ReactNode[]

Parameters

children

ReactNode

Returns

ReactNode[]