## Feature Examples ### Size - description:

Control button size with size prop:

large is best for calls to action that require more emphasis.

medium is for main page actions and common use cases.

small fits into smaller UI elements like cards and widgets.

tiny is used for dense layouts.

- example: ```jsx Publish Publish Publish Publish ``` ### Skin - description:

Change the appearance of a button with a skin prop.

standard is for general primary actions.

light is for primary actions that are on dark backgrounds.

dark should be used with buttons on backgrounds with colors.

transparent is for general actions on backgrounds with vivid colors or images.

premium 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 Publish Publish Publish Publish Publish Publish Publish Publish Publish Publish ; ``` ### Affix - description:

Add more context to actions with affix icons:

Emphasize the button action with a prefixIcon.

Note: Avoid using a suffixIcon, especially chevrons or directional indicators. These can be confused with the split icon button’s dropdown trigger and make the interaction unclear.

- example: ```jsx }> Publish }> Publish }> Publish }> Publish ; ``` ### Grouping - description:

Place up to 2–3 visible actions inside the 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 () => ( {}}>Publish {}}>Preview {}}>Save ( )} > } onClick={() => {}} /> } onClick={() => {}} /> } skin="destructive" onClick={() => {}} /> {}}>Publish {}}>Preview {}}>Save ); ``` ### Disabled - description:

To disable a split button, use the disabled prop which indicates a button can't be selected.

- example: ```jsx Publish ; ``` ### Text overflow - description:

Use the ellipsis prop for overflow text. The full text will be displayed in a when a user hovers over the button. Control the style of the tooltip using the tooltipProps.

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 This label exceeds available space and is shown in a tooltip ; ``` ## Developer Examples ### Styling - description:

Properties are applied through a parent container and they control all child elements within a group.

- example: ```jsx Publish ( )} > } onClick={() => {}} /> } onClick={() => {}} /> } onClick={() => {}} /> ``` ## Common Use Case Examples ### Composer - description:

Use 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: }, { id: 1, label: 'Categories', icon: }, { id: 2, label: 'Tags', icon: }, ]; const authorOptions = [ listItemSelectBuilder({ id: 0, prefix: , title: 'Doe John', label: 'Doe John', }), listItemSelectBuilder({ id: 1, prefix: , title: 'John Doe', label: 'John Doe', }), listItemActionBuilder({ title: 'New Author', prefixIcon: , }), ]; return ( Publish ( )} > } onClick={() => {}} /> } onClick={() => {}} /> } onClick={() => {}} /> Composer content area ); }; ``` ### Modal - description:

Use 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 {}} title="Add menu" sideActions={ {}}>Save ( )} > } onClick={() => {}} /> } onClick={() => {}} /> } onClick={() => {}} /> } > ``` ### Card - description:

Use on content cards to surface a primary action alongside secondary options e.g. duplicate, cancel, without overcrowding the row.

- example: ```jsx () => { const renderImage = () => ; const renderContent = () => ( JAVA meetup Jan 20, 2021, 10:00 AM, Location will be announced later }> Edit ( )} > } onClick={() => {}} /> } onClick={() => {}} /> } onClick={() => {}} /> ); return ( {renderImage()} {renderContent()} ); }; ```