Theme

MCP Server

Getting started

Contributing

Breaking Changes

FormattedRelativeTime

Combobox with Add New

Density

Inline Form Controls

Refinement levers

Search with DropdownMenu

Componentsv2.170.1

Iconsv1.15.0

MCPv0.8.18

Tokensv0.34.1

ToggleButton

Github

Storybook

Aria pattern

A button that toggles between active and inactive states.

Importing

In a React app, the component can be imported via:

import { ToggleButton } from '@customerio/pluma-components/react';

The component accepts an isActive prop, which tells it what state to render in. The button itself doesn't control the active state internally - it is up to the consumer to manage that state and change it when the button is clicked.

import { ToggleButton } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
	const [isActive, setIsActive] = useState(false);

	return <ToggleButton
		isActive={isActive}
		onClick={(e) => setIsActive(!isActive)}
	>
		Click me
	</ToggleButton>;
}

Size

A ToggleButton can be medium (default) or small:

<ToggleButton isActive={true}>Medium</ToggleButton>

<ToggleButton size="small" isActive={true}>Small</ToggleButton>

Icons

Just like the Button component, a ToggleButton accepts an icon name to render inside:

import { ToggleButton } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
	const [isActive, setIsActive] = useState(false);

	return <ToggleButton
		icon="analysis"
		isActive={isActive}
		onClick={(e) => setIsActive(!isActive)}
	>
		Measure
	</ToggleButton>;
}

Icon only button

A ToggleButton can be rendered with just an icon by setting the isIconOnly argument to true. This will stop the button from rendering the text content, and adjust the paddings so it looks more balanced:

import { ToggleButton } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
	const [isActive, setIsActive] = useState(false);

	return <ToggleButton
		icon="analysis"
		isIconOnly={true}
		isActive={isActive}
		onClick={(e) => setIsActive(!isActive)}
	/>;
}

Disabled state

A ToggleButton can be disabled by setting the isDisabled prop to true:

<ToggleButton
	isDisabled={true}
	isActive={false}
>
	Inactive
</ToggleButton>

<ToggleButton
	isDisabled={true}
	isActive={true}
>
	Active, but disabled
</ToggleButton>

API

`PlumaToggleButton` `extends Box`

`href` `string | undefined`

The URL for the toggle, if it should render as a link instead of a button

`icon` `IconName | null | undefined`

The name of an icon (from Pluma Icons) to render in the button.

`iconPosition` `"leading" | "trailing" | undefined`

Default:leading

Which side of the text the icon should be rendered on. leading renders the icon before the text, trailing renders it after

`isActive` `boolean | undefined`

Whether the button is in the active (toggled) state.

`isDisabled` `boolean | undefined`

Disables the button. Use this instead of the native disabled prop, to make sure non-button elements (when used with as) get the correct styles.

`isIconOnly` `boolean | undefined`

When this is set to true, the button won't render any text, and will reduce its side paddings.

`onClick` `((event: MouseEventT) => void) | undefined`

Called when the button is clicked

`size` `"small" | "medium" | "sm" | "md" | undefined`

Default:md

The size of the button. medium and small are deprecated, use md and sm instead.

`unsafe_iconColor` `"critical" | "caution" | "success" | "information" | "feature" | "accent" | "base" | "invert" | "subtle" | undefined`

Change the color of the icon. By default, the icon inherits the button's text color. Use with care, as it can cause inconsistencies in the UI.

`unsafe_iconSize` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

Only use if necessary: allows overriding the icon's size.

`unsafe_isLegacy` `boolean | undefined`

Whether the component should render with "legacy" styles.

ToggleButton

Importing

Usage

Size

Icons

Icon only button

Disabled state

API

`PlumaToggleButton` `extends Box`

`href` `string | undefined`

`icon` `IconName | null | undefined`

`iconPosition` `"leading" | "trailing" | undefined`

`isActive` `boolean | undefined`

`isDisabled` `boolean | undefined`

`isIconOnly` `boolean | undefined`

`onClick` `((event: MouseEventT) => void) | undefined`

`size` `"small" | "medium" | "sm" | "md" | undefined`

`unsafe_iconColor` `"critical" | "caution" | "success" | "information" | "feature" | "accent" | "base" | "invert" | "subtle" | undefined`

`unsafe_iconSize` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

`unsafe_isLegacy` `boolean | undefined`

On this page

ToggleButton

Importing

Usage

Size

Icons

Icon only button

Disabled state

API

PlumaToggleButton extends Box

href string | undefined

icon IconName | null | undefined

iconPosition "leading" | "trailing" | undefined

isActive boolean | undefined

isDisabled boolean | undefined

isIconOnly boolean | undefined

onClick ((event: MouseEventT) => void) | undefined

size "small" | "medium" | "sm" | "md" | undefined

unsafe_iconColor "critical" | "caution" | "success" | "information" | "feature" | "accent" | "base" | "invert" | "subtle" | undefined

unsafe_iconSize "fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined

unsafe_isLegacy boolean | undefined

On this page

`PlumaToggleButton` `extends Box`

`href` `string | undefined`

`icon` `IconName | null | undefined`

`iconPosition` `"leading" | "trailing" | undefined`

`isActive` `boolean | undefined`

`isDisabled` `boolean | undefined`

`isIconOnly` `boolean | undefined`

`onClick` `((event: MouseEventT) => void) | undefined`

`size` `"small" | "medium" | "sm" | "md" | undefined`

`unsafe_iconColor` `"critical" | "caution" | "success" | "information" | "feature" | "accent" | "base" | "invert" | "subtle" | undefined`

`unsafe_iconSize` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

`unsafe_isLegacy` `boolean | undefined`