Skip to main content

Split button

Split buttons are CTAs that trigger additional options similar to dropdown buttons but differs in the functionality part where split button always has a default action while dropdown does not.

Variants​

There are eight different vairants of split buttons available in GEL.

Split button types

Demo​

Split button types

Guidance​

  • Secondary split buttons are for actions that are of less value similar to secondary button but with additional actionable items.
  • Similar to dropdown buttons, consider using a tiered menu when the user selects or clicks the dropdown icon.

When to use​

  • Split buttons are to be used when an action needs to be a default action and other available actions can be organized inside the dropdown button.

When not to use​

  • If there is no default action and all the options has the same weightage in priority, consider using a dropdown instead.

Consideration​

Split button consideration

Designer assets​

figma
Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API​

vue
Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP
Last updated on