Skip to Content

Theme Button

A button that toggles the page theme between light and dark.

Local target

Use the target prop to scope theme changes to a specific container instead of globally.

This container has its own theme

Component props

NameTypeDescription
targetRefObject | HTMLElementElement to apply theme to (default: global)
variantButtonVariant"default" | "primary" | "outline" | "quiet" (default: "quiet")
sizeButtonSize"xs" | "sm" | "md" | "lg" | "xl"
onPress(e: PressEvent) => voidCalled when button is pressed