SizeProvider

Context provider that transmits component size to child components. Used internally by components like Button to pass their size to nested icons.

Import

import { SizeProvider, useSize } from 'asterui'

Usage

Automatic Size Propagation

When using components like Button with the icon prop, the size is automatically propagated to the icon:

import { Button } from 'asterui'
import { StarIcon } from '@aster-ui/icons'

function App() {
  return (
    <Button size="lg" icon={<StarIcon />}>
      Large Button
    </Button>
  )
}

The StarIcon will automatically receive the lg size from the Button.

Custom Components

Use SizeProvider to create custom components that propagate size to children:

import { SizeProvider, useSize } from 'asterui'

function CustomIconButton({ size = 'md', icon, children }) {
  return (
    <SizeProvider size={size}>
      <button className="custom-button">
        {icon}
        {children}
      </button>
    </SizeProvider>
  )
}

Consuming Size Context

Use the useSize hook to access the current size context:

import { useSize } from 'asterui'

const sizeMap = {
  xs: 12,
  sm: 16,
  md: 20,
  lg: 24,
  xl: 28,
}

function CustomIcon() {
  const size = useSize() ?? 'md'
  const pixels = sizeMap[size]

  return (
    <svg width={pixels} height={pixels} viewBox="0 0 24 24">
      {/* ... */}
    </svg>
  )
}

API

SizeProvider Props

Property	Type	Description
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	Size to provide to child components.
children	React.ReactNode	Child components that can consume the size context.

useSize Return Value

Return	Type	Description
size	Size | undefined	The current size from the nearest SizeProvider, or undefined if not within a provider.

Size Values

Size	Typical Pixel Value
xs	12px
sm	16px
md	20px
lg	24px
xl	28px

Components Using SizeProvider

The following components use SizeProvider internally to propagate their size:

• Button: Passes size to the icon prop
• CopyButton: Passes size to built-in icons

Integration with @aster-ui/icons

The @aster-ui/icons package is designed to work seamlessly with SizeProvider:

import { Button } from 'asterui'
import { HeartIcon, StarIcon } from '@aster-ui/icons'

function App() {
  return (
    <>
      <Button size="sm" icon={<HeartIcon />}>Small</Button>
      <Button size="lg" icon={<StarIcon />}>Large</Button>
    </>
  )
}

Icons automatically adjust their size based on the parent component’s size without explicit configuration.