Multi-part button

Last updated: 3.0.0 (04/07/2024)

A button used to display complex actions. Does not directly accept the children prop, instead taking the title and subtitle props to display text content.

Usage

import { MultipartButton } from "@valence-ui/core";
import { IconPlus } from "@tabler/icons-react";

function MyComponent() { 
    return ( 
        <MultipartButton
             title="This is a multi-part button!"
             subtitle="Isn't that cool?"
             leftIcon={<IconPlus />}
        />
    )
}

Adding a right icon

import { MultipartButton } from "@valence-ui/core";
import { IconPlus, IconChevronRight } from "@tabler/icons-react";

function MyComponent() { 
    return ( 
        <MultipartButton
             title="This is a multi-part button!"
             subtitle="Isn't that cool?"
             leftIcon={<IconPlus />}
             rightIcon={<IconChevronRight />}
        />
    )
}

Modifying the title or subtitle

titleProps and subtitleProps can be passed into the button to modify the appearance of the title and subtitle. Both under the hood use the Text component with some pre-configured styling.

import { MultipartButton } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <MultipartButton
             title="This is a multi-part button!"
             subtitle="Isn't that cool?"
             titleProps={{
                  size: "xl"
                  color: "blue"
             }}
             subtitleProps={{
                  size: "xs"
                  color: "black"
             }}
        />
    )
}

Props

Extends PrimitiveButtonProps.

Property	Type	Description
title (required)	string	Title/main text content of this button.
subtitle	string	Descriptive secondary text of this button.
leftIcon	ReactNode	Icon to display on the left of the button.
rightIcon	ReactNode	Icon to display on the right of the button.
iconContainerStyle	CSSProperties	Styles to pass to the icon containers.
titleProps	TextProps	Props to pass to the title text component.
subtitleProps	TextProps	Props to pass to the subtitle text component.

---

Changelog

• 3.0.0: added the iconContainerStyle prop; now uses padding prop.

• 2.1.0: the leftIcon and rightIcon props can support multiple sub-components.