Continuing the series on design systems, today I will share about buttons. Buttons are one of the most important components in a design system, directly influencing purchasing actions, service usage, etc. A button consists of three main components:

• Container: the background, which can be solid (background color), outline (border), or text-only.

• Label: the displayed text, usually concise and clear, expressing an action (e.g., Submit, Save, Cancel).

• Icon (optional): can be placed before (leading) or after (trailing) the label to enhance meaning.

When building a button system, we need to have about three different sizes for buttons to allow flexibility. The three specific sizes are as follows:

• Size S: the height of the button is about 28 - 32px, I usually choose 32px with a font size of 14px, icon size of 16px, spacing between the icon and label is 4px, and padding on both sides is 12px.

• Size M: the height of the button is about 36 - 40px, I usually choose 40px with a font size of 14px, icon size of 16px, spacing between the icon and label is 4px, and padding on both sides is 16px.

• Size L: the height of the button is about 44 - 48px, I usually choose 48px with a font size of 16px, icon size of 20px, spacing between the icon and label is 4px, and padding on both sides is 20px.

Common types of buttons are typically used as follows:

• Primary button: brand color, white text, clearly the most prominent. Only one primary button should be used on a screen for the most important action (Submit, Save, Continue, CTA to purchase...).

• Secondary button: has a gray stroke, no background, used for less important secondary actions than Primary, such as: Cancel, back, or alternative options.

• Tertiary button: only text (or text + icon), no background, the least prominent, usually used for supplementary actions like: Learn more, View detail, skip,...

• Dark button: high contrast black background, often a variant of the neutral button. Used when neutrality is needed but still prominent, or on a bright/strong brand background. Commonly seen in dark mode or when an action needs to stand out without using brand color.

• White button: white background, easy to place on a dark color background. Often used on dark/brand color backgrounds, for example: “Cancel”, “Not now” when Primary is brand color.

• Icon button – Primary: only icon, brand color background, clear, prominent. Used for main actions that only need an icon, for example: Add, Send, Play, FAB button.

• Icon button – Secondary: only gray stroke, no background, less prominent than primary icon. Used for secondary actions like: Edit, Filter, Download,... when the icon is not the main CTA.

• Icon button – Tertiary: only icon, no stroke, no background, the lightest, least attention-grabbing, usually used for supplementary actions like: More options, Close, Like,...

Additionally, we also have Destructive buttons, which are divided into three levels:

• Destructive button – Primary: Has a solid red color with white text. Used for the most critical destructive actions such as deleting an account, canceling a contract, or deleting irrecoverable data. Should only be used when a clear warning about severe consequences is needed, and must be accompanied by a confirm dialog or additional warning.

• Destructive button – Secondary: Has a red stroke, no background, red text. Used for moderately important destructive actions, for example, deleting a small item or canceling an action in a process. Often used when a destructive choice is needed but is not the main action.

• Destructive button – Tertiary: Only red text, no stroke, no background. Used for less important destructive actions, for example, deleting a tag, deleting a comment, or canceling a secondary item. Should be used when wanting to minimize prominence but still carry a warning.

• Destructive button icon – Primary: Has an icon, solid red. Used for critical destructive actions represented only by an icon, for example, a trash can to delete an item in a list. Typically applied when no descriptive text is needed as the context is clear.

• Destructive button icon – Secondary: Has an icon, red stroke. Used for moderately destructive actions, needing a visual symbol but not requiring strong emphasis.

• Destructive button icon – Tertiary: Only a red icon, no background. Used for less important destructive actions, often in a secondary context or when there are many buttons in the interface.

Buttons will have five states when users interact, below are typical examples of the states of a Primary Button:

• Default (Primary/500): This is the default state of the button, using the primary color (brand color).

• Hover (Primary/400): When the user hovers over the button, it brightens to indicate interactivity.

• Pressed (Primary/600): When the button is pressed (pressed/active), it darkens to increase contrast and provide feedback on the action.

• Loading (Primary/600): The button changes to a processing state, maintaining the pressed color but will have an additional loading icon.

• Disabled (Default 30%): When the button is disabled, its opacity is reduced to 30% to fade it, signaling that it cannot be interacted with.

Below is the system of buttons after completion, including three main buttons:

• Primary Button: This is the basic type of button, using the primary color. It represents normal, positive, or default actions in the interface.

• Destructive Button: A special type of button used to warn or perform destructive actions (delete, cancel, remove). It uses red to emphasize danger and attract user attention. The structure is similar to the Normal Button but changes color to differentiate.

• Neutral Button: A neutral button, usually using gray/black or white. It does not emphasize important or dangerous actions but is merely a secondary or supplementary operation. The Neutral Button is suitable for less important functions.