Toggle

The Toggle component provides a customizable button that can be toggled between two states. It supports various styling options through variants and sizes.

Usage

import { Toggle } from '@harnessio/ui/components'

//...

return (
    <Toggle
      size="sm"
      variant="outline"
      selectedVariant="primary"
      rounded
      tooltipProps={{
        content: <p>This is a tooltip</p>
      }}
      text="Toggle"
    />
)

Controlled and Uncontrolled

The Toggle component can be used in both controlled and uncontrolled modes. In controlled mode, the selected prop is used to control the toggle’s state, and the onChange prop is called when the toggle’s state changes. In uncontrolled mode, the defaultValue prop is used to set the initial state of the toggle, and the component manages its own state internally.

Variants

The Toggle component accepts a variant prop to control its applyed styles. Supported values are: outline, ghost, and transparent. The selectedVariant prop controls the style when the toggle is pressed, with options for primary and secondary.

Sizes

The Toggle component accepts a size prop to control its overall dimensions. Supported values are: md, sm, and xs.

Rounded

The Toggle component accepts a rounded prop. When provided, the underlying button will have fully rounded corners.

Icon only

The Toggle component accepts a iconOnly prop. When this prop is set, the Toggle is styled to fit the dimensions of an icon, making it suitable for icon-only buttons. Note that when iconOnly is set, the text prop will be used for the area-label, and the prefixIcon prop will be used as the only icon displayed.

With tooltip

The Toggle component accepts a tooltipProps prop. When provided, the Toggle will be wrapped in a Tooltip component. The tooltipProps object can include the following properties from TooltipProps: title, content, side, and align.

API Reference

The Toggle component is a button that can be toggled on and off.

Prop	Required	Default	Type
variant	false	outline	'outline' | 'ghost' | 'transparent'
selectedVariant	false	primary	'primary' | 'secondary'
onChange	false		(selected: boolean) => void
iconOnly	false	false	boolean
disabled	false	false	boolean
rounded	false	false	boolean
text	false		string
size	false	md	'md' | 'sm' | 'xs'
className	false		string
prefixIcon	false		IconV2NamesType
prefixIconProps	false		IconPropsV2
suffixIcon	false		IconV2NamesType
suffixIconProps	false		IconPropsV2
defaultValue	false	false	boolean
selected	false		boolean
tooltipProps	false	undefined	Pick<TooltipProps, 'title' | 'content' | 'side' | 'align'>