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.

Last updated

Was this helpful?