@wix/design-system

## Feature Examples ### Size - description: Control button size with <code>size</code> prop:<code>large</code> is best for calls to action that require more emphasis.<code>medium</code> is for main page actions and common use cases.<code>small</code> fits into smaller UI elements like cards and widgets.<code>tiny</code> is used for dense layouts. - example: ```jsx <Box> <StorybookComponents.Stack> <SplitAction size="large"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> <SplitAction size="medium"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> <SplitAction size="small"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> <SplitAction size="tiny"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> </StorybookComponents.Stack> </Box> ``` ### Skin - description: Change the appearance of a button with a <code>skin</code> prop.<code>standard</code> is for general primary actions.<code>light</code> is for primary actions that are on dark backgrounds.<code>dark</code> should be used with buttons on backgrounds with colors.<code>transparent</code> is for general actions on backgrounds with vivid colors or images.<code>premium</code> is for actions that prompt users to upgrade their plans to premium subscription.Each action can be primary or secondary. There should only be one primary action per page.Note: Secondary buttons should be used alongside primary buttons for less utilized actions, such as cancel or back. - example: ```jsx <StorybookComponents.Stack flexDirection="column" gap="40px"> <Box gap="20px"> <SplitAction skin="standard"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> <SplitAction skin="standard" priority="secondary"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> </Box> <Box gap="20px" backgroundColor="#000" padding="6px"> <SplitAction skin="light"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> <SplitAction skin="light" priority="secondary"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> </Box> <Box gap="20px"> <SplitAction skin="dark"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> <SplitAction skin="dark" priority="secondary"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> </Box> <Box gap="20px" backgroundColor="#a0c4ff" padding="6px"> <SplitAction skin="transparent"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> <SplitAction skin="transparent" priority="secondary"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> </Box> <Box gap="20px"> <SplitAction skin="premium"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> <SplitAction skin="premium" priority="secondary"> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton ariaLabel="More options"/> </SplitAction> </Box> </StorybookComponents.Stack>; ``` ### Affix - description: Add more context to actions with affix icons:Emphasize the button action with a <code>prefixIcon</code>.Note: Avoid using a <code>suffixIcon</code>, especially chevrons or directional indicators. These can be confused with the split icon button’s dropdown trigger and make the interaction unclear. - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <StorybookComponents.Stack> <SplitAction size="large"> <SplitActionButton prefixIcon={<Icons.Add />}> Publish </SplitActionButton> <SplitActionIconButton ariaLabel="More options" /> </SplitAction> </StorybookComponents.Stack> <StorybookComponents.Stack> <SplitAction size="medium"> <SplitActionButton prefixIcon={<Icons.Add />}> Publish </SplitActionButton> <SplitActionIconButton ariaLabel="More options" /> </SplitAction> </StorybookComponents.Stack> <StorybookComponents.Stack> <SplitAction size="small"> <SplitActionButton prefixIcon={<Icons.Add />}> Publish </SplitActionButton> <SplitActionIconButton ariaLabel="More options" /> </SplitAction> </StorybookComponents.Stack> <StorybookComponents.Stack> <SplitAction size="tiny"> <SplitActionButton size="tiny" prefixIcon={<Icons.Add />}> Publish </SplitActionButton> <SplitActionIconButton ariaLabel="More options" /> </SplitAction> </StorybookComponents.Stack> </StorybookComponents.Stack>; ``` ### Grouping - description: Place up to 2–3 visible actions inside the <code><SplitAction/></code> group, and move the rest under the chevron icon button.Note: Limiting visible actions keeps the primary decision clear and UI uncluttered. If you need more than three visible actions, consider whether a full toolbar pattern fits better or use separate buttons. - example: ```jsx () => ( <Box direction="vertical" gap="18px"> <Box direction="vertical" gap="6px"> <SplitAction> <SplitActionButton onClick={() => {}}>Publish</SplitActionButton> <SplitActionButton onClick={() => {}}>Preview</SplitActionButton> <SplitActionButton onClick={() => {}}>Save</SplitActionButton> <PopoverMenu appendTo="window" placement="bottom-end" triggerElement={({ toggle }) => ( <SplitActionIconButton onClick={toggle} ariaLabel="More post actions" /> )} > <PopoverMenu.MenuItem text="Schedule" prefixIcon={<Icons.Time />} onClick={() => {}} /> <PopoverMenu.MenuItem text="Duplicate" prefixIcon={<Icons.Duplicate />} onClick={() => {}} /> <PopoverMenu.Divider /> <PopoverMenu.MenuItem text="Delete" prefixIcon={<Icons.Delete />} skin="destructive" onClick={() => {}} /> </PopoverMenu> </SplitAction> </Box> <Box direction="vertical" gap="6px"> <SplitAction> <SplitActionButton onClick={() => {}}>Publish</SplitActionButton> <SplitActionButton onClick={() => {}}>Preview</SplitActionButton> <SplitActionButton onClick={() => {}}>Save</SplitActionButton> </SplitAction> </Box> <Box direction="vertical" gap="6px"> <SplitAction> <SplitActionIconButton ariaLabel="Increase"> <Icons.Add /> </SplitActionIconButton> <SplitActionIconButton ariaLabel="Decrease"> <Icons.Minus /> </SplitActionIconButton> </SplitAction> </Box> </Box> ); ``` ### Disabled - description: To disable a split button, use the <code>disabled</code> prop which indicates a button can't be selected. - example: ```jsx <SplitAction disabled> <SplitActionButton>Publish</SplitActionButton> <SplitActionIconButton/> </SplitAction>; ``` ### Text overflow - description: Use the <code>ellipsis</code> prop for overflow text. The full text will be displayed in a <code><Tooltip/></code> when a user hovers over the button. Control the style of the tooltip using the <code>tooltipProps</code>.Note: Try to avoid lengthy action labels. CTA text should be short and clear – one to two words, or max three for specific use cases. - example: ```jsx <StorybookComponents.Stack flexDirection="column" width="180px"> <SplitAction> <SplitActionButton ellipsis >This label exceeds available space and is shown in a tooltip</SplitActionButton> <SplitActionIconButton></SplitActionIconButton> </SplitAction> </StorybookComponents.Stack>; ``` ## Developer Examples ### Styling - description: Properties are applied through a parent <code><SplitAction/></code> container and they control all child elements within a group. - example: ```jsx <Box direction="horizontal" align="center"> <SplitAction size="medium" skin="premium"> <SplitActionButton>Publish</SplitActionButton> <PopoverMenu appendTo="window" placement="bottom-end" triggerElement={({ toggle }) => ( <SplitActionIconButton onClick={toggle} ariaLabel="More options" /> )} > <PopoverMenu.MenuItem text="Schedule" prefixIcon={<Icons.Time />} onClick={() => {}} /> <PopoverMenu.MenuItem text="Save as Draft" prefixIcon={<Icons.Saved />} onClick={() => {}} /> <PopoverMenu.Divider /> <PopoverMenu.MenuItem text="Duplicate" prefixIcon={<Icons.Duplicate />} onClick={() => {}} /> </PopoverMenu> </SplitAction> </Box> ``` ## Common Use Case Examples ### Composer - description: Use <code><SplitAction/></code> in composer headers to pair a primary CTA with additional overflow actions e.g. schedule, save as draft, duplicate. - example: ```jsx () => { const [activeTab, setActiveTab] = React.useState(0); const [toggleImage, setToggleImage] = React.useState(true); const [togglePosts, setTogglePosts] = React.useState(false); const [toggleCommenting, setToggleCommenting] = React.useState(false); const [descriptionValue, setDescriptionValue] = React.useState(''); const [authorTags, setAuthorTags] = React.useState([]); const [categories, setCategories] = React.useState([ { id: 0, label: 'Other posts', isChecked: false }, { id: 1, label: 'Recipes', isChecked: false }, { id: 2, label: 'Lifestyle', isChecked: false }, ]); const [publishDate, setPublishDate] = React.useState(); const [themeTags, setThemeTags] = React.useState([ { id: '1', label: 'Sport' }, { id: '2', label: 'Routine' }, ]); const [author, setAuthor] = React.useState(); const items = [ { id: 0, label: 'Settings', icon: <Icons.Settings /> }, { id: 1, label: 'Categories', icon: <Icons.Category /> }, { id: 2, label: 'Tags', icon: <Icons.Tag /> }, ]; const authorOptions = [ listItemSelectBuilder({ id: 0, prefix: <Avatar size="size18" />, title: 'Doe John', label: 'Doe John', }), listItemSelectBuilder({ id: 1, prefix: <Avatar size="size18" />, title: 'John Doe', label: 'John Doe', }), listItemActionBuilder({ title: 'New Author', prefixIcon: <Icons.Add />, }), ]; return ( <Layout gap={0}> <Cell> <ComposerHeader backButtonValue="Back"> <ComposerHeader.Actions justifyContent="flex-end"> <ToggleButton labelValue="Undo"> <Icons.Undo /> </ToggleButton> <ToggleButton labelValue="Redo"> <Icons.Redo /> </ToggleButton> </ComposerHeader.Actions> <ComposerHeader.MainActions> <Button skin="inverted">Preview</Button> <SplitAction> <SplitActionButton>Publish</SplitActionButton> <PopoverMenu appendTo="window" placement="bottom-end" triggerElement={({ toggle }) => ( <SplitActionIconButton onClick={toggle} ariaLabel="More publish options" /> )} > <PopoverMenu.MenuItem text="Schedule" prefixIcon={<Icons.Time />} onClick={() => {}} /> <PopoverMenu.MenuItem text="Save as Draft" prefixIcon={<Icons.Saved />} onClick={() => {}} /> <PopoverMenu.Divider /> <PopoverMenu.MenuItem text="Duplicate" prefixIcon={<Icons.Duplicate />} onClick={() => {}} /> </PopoverMenu> </SplitAction> </ComposerHeader.MainActions> </ComposerHeader> </Cell> <Cell> <Box direction="vertical"> <Box gap="0" height="600px"> <ComposerSidebar labelPlacement="bottom" items={items} /> <Box width="100%"> <Box width="100%" padding={4}> <StorybookComponents.Placeholder> <Box verticalAlign="middle" align="center" height="100%"> <Text>Composer content area</Text> </Box> </StorybookComponents.Placeholder> </Box> </Box> </Box> </Box> </Cell> </Layout> ); }; ``` ### Modal - description: Use <code><SplitAction/></code> in modal footers to pair a primary CTA with additional overflow actions e.g. save & add another, save as draft, save as template. - example: ```jsx <CustomModalLayout onCloseButtonClick={() => {}} title="Add menu" sideActions={ <Box width="100%" align="right" gap="SP2"> <Button priority="secondary" onClick={() => {}}> Cancel </Button> <SplitAction> <SplitActionButton onClick={() => {}}>Save</SplitActionButton> <PopoverMenu appendTo="window" placement="top-end" triggerElement={({ toggle }) => ( <SplitActionIconButton onClick={toggle} ariaLabel="More save options" /> )} > <PopoverMenu.MenuItem text="Save & Add Another" prefixIcon={<Icons.Add />} onClick={() => {}} /> <PopoverMenu.MenuItem text="Save as Draft" prefixIcon={<Icons.Saved />} onClick={() => {}} /> <PopoverMenu.Divider /> <PopoverMenu.MenuItem text="Save as Template" prefixIcon={<Icons.Duplicate />} onClick={() => {}} /> </PopoverMenu> </SplitAction> </Box> } > <Layout> <Cell> <FormField label="Name"> <Input value="Brunch Menu" /> </FormField> </Cell> <Cell> <FormField label="Description"> <InputArea value="Brunch includes pastries, fruits, omelettes, coffee, and more." /> </FormField> </Cell> <Cell> <Box> <FormField label="Visible to customers" labelPlacement="right" stretchContent={false} > <ToggleSwitch checked /> </FormField> </Box> </Cell> </Layout> </CustomModalLayout> ``` ### Card - description: Use <code><SplitAction/></code> on content cards to surface a primary action alongside secondary options e.g. duplicate, cancel, without overcrowding the row. - example: ```jsx () => { const renderImage = () => <Image width={230} borderRadius={0}></Image>; const renderContent = () => ( <Box direction="vertical" verticalAlign="space-between" padding="24px 29px 27px" flexGrow={1} > <Box direction="vertical" gap={1}> <Text weight="bold">JAVA meetup</Text> <Text size="small" weight="thin" secondary light> Jan 20, 2021, 10:00 AM, Location will be announced later </Text> </Box> <Box align="space-between"> <Box /> <Box gap="SP2" verticalAlign="middle"> <Button priority="secondary" size="small" prefixIcon={<Icons.PromoteSmall />} > Promote </Button> <SplitAction size="small" priority="secondary"> <SplitActionButton prefixIcon={<Icons.EditSmall />}> Edit </SplitActionButton> <PopoverMenu textSize="small" appendTo="window" placement="bottom-end" triggerElement={({ toggle }) => ( <SplitActionIconButton onClick={toggle} ariaLabel="More actions" /> )} > <PopoverMenu.MenuItem text="Edit SEO settings" prefixIcon={<Icons.SettingsSmall />} onClick={() => {}} /> <PopoverMenu.Divider /> <PopoverMenu.MenuItem text="Duplicate as draft" prefixIcon={<Icons.DuplicateSmall />} onClick={() => {}} /> <PopoverMenu.MenuItem text="Cancel event" skin="destructive" prefixIcon={<Icons.BlockSmall />} onClick={() => {}} /> </PopoverMenu> </SplitAction> </Box> </Box> </Box> ); return ( <Card hideOverflow> <Box minHeight={200}> {renderImage()} {renderContent()} </Box> </Card> ); }; ```