Saphyte & E-Afghans Button | Public Design System Documentation

Skip to documentation

Design systemsSelect design system

Search this documentation

Back to portfolio

Button

An action with a clear outcome. Use a button when someone starts, confirms, or changes something.

Created & adapted by Insan NurjamanChakra UI foundationCurated public preview

Anatomy

Save changes

Leading iconAction labelTrailing icon

Six visual variants, seven sizes, editable labels, and optional icons are source-backed. Current Default/Hover/Disabled properties do not imply that every palette/state combination is complete; older guidance is not fully aligned with the current model.

Try the component

Illustrative interaction

BrandVariantState

Solid · Default state

Native example only. No live account action, production service, or source-code parity is implied.

Variants & sizes

Source model

Solid · Subtle · Surface · Outline · Ghost · Plain

Source size names

2xsxssmmdlgxl2xl

Original specimens

Inspect original design examples

Saphyte defaultSaphyte hoverE-Afghans defaultE-Afghans hover

Original exported design. Open to inspect at full size. Source appearance is preserved; private editable files are not linked.

Usage

Do: name the outcome

Save changes

A concise verb tells someone what happens next. Reserve strong emphasis for the primary task.

Avoid: vague instructions

Click here

A generic label hides the result. Use a link instead when the purpose is navigating to a destination.

Illustrative label comparison, not a pair of production controls.

Choose deliberately

Name the result, such as Save changes, rather than Click here.
Reserve strong emphasis for the primary task.
Use a link for a destination, rather than styling navigation as an action.

Keep the limits visible

Source properties and screenshots document design intent. Validate the supported combinations and interaction behavior in the implementation before treating them as a guarantee.

Read usage guidelines

Curated design documentation by Insan Nurjaman. Native examples are illustrative, not a production package or a standards certification.

Explore the story