Back

Figma Kit /

Buttons

The Button component is a fundamental interactive element used to trigger actions or events within an interface. Buttons can be utilized in forms, dialogs, and as call-to-action elements throughout an application.

Key features:

  • Variety of button types including primary, secondary, and link buttons.

  • Icon support for primary and secondary buttons.

  • Group buttons for collective actions.

  • System buttons for system-level actions.

  • Responsive design ensuring usability across different devices and screen sizes.

Design considerations:

  • Ensure buttons have sufficient contrast against their background for accessibility.

  • Maintain consistent padding and margin for uniformity across different buttons.

  • Use hover, active, and disabled states to provide visual feedback to users.

  • Consider using different styles (e.g., solid, outlined) to distinguish between primary and secondary actions.

  • Adopt a color scheme that aligns with the overall design language of the application.

Usage guidelines:

  • Use primary buttons for the main actions in a user flow.

  • Secondary buttons should be used for less important actions.

  • Link buttons can be used for navigational purposes or less prominent actions.

  • Ensure button labels are concise and clearly indicate the action.

  • Group buttons when multiple related actions are available.

Implementation notes:

  • Follow the BEM (Block Element Modifier) naming convention for class names to ensure modularity and reusability.

  • Use CSS variables for theming and easy customization of button styles.

  • Consider using a button mixin or utility classes for common styles and states.

  • Ensure ARIA roles and attributes are correctly applied for accessibility.

  • Test buttons across different browsers and devices to ensure consistent behavior and appearance.

Supercharge Your Workflow

This section is a part of SegmentUI Pro. SegmentUI Pro is a complete UI kit & component library for Figma & Framer as well as other design resources.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

Is this a one time payment or a subscription?

Will I get future updates if I purchase now?

Is there a free version?

Do you have a student discount?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

Is this a one time payment or a subscription?

Will I get future updates if I purchase now?

Is there a free version?

Do you have a student discount?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time paymen