UnstyledButton

Unstyled polymorphic button that resets default button styles. Use it as a base for custom button components.

Import


import { UnstyledButton } from '@tidbcloud/uikit'

Basic Usage


import { UnstyledButton } from '@tidbcloud/uikit'
 
function Demo() {
  return <UnstyledButton>Button without styles</UnstyledButton>
}

Polymorphic Component

UnstyledButton is a polymorphic component - change the root element with component prop:


import { UnstyledButton } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      {/* Renders as button (default) */}
      <UnstyledButton>Click me</UnstyledButton>
 
      {/* Renders as anchor */}
      <UnstyledButton component="a" href="https://example.com">
        Link button
      </UnstyledButton>
    </>
  )
}

Custom Button Example

Create a custom styled button based on UnstyledButton:


import { UnstyledButton } from '@tidbcloud/uikit'
 
function CustomButton({ children, ...props }) {
  return (
    <UnstyledButton
      style={{
        padding: '10px 20px',
        backgroundColor: 'var(--mantine-color-blue-6)',
        color: 'white',
        borderRadius: '4px'
      }}
      {...props}
    >
      {children}
    </UnstyledButton>
  )
}

Get Element Ref


import { useRef } from 'react'
import { UnstyledButton } from '@tidbcloud/uikit'
 
function Demo() {
  const ref = useRef<HTMLButtonElement>(null)
  return <UnstyledButton ref={ref}>Button</UnstyledButton>
}

Key Props

Prop	Type	Description
component	ElementType	Root element to render (default: ‘button’)
size	string \| number	Size passed from parent, sets data-size attribute