Create "Buttons" for Component Library - UI

[kangina-tech]

Overview

Buttons are one of the very basics of any component library. Creating a sticker sheet for them to be used by other projects would guide the way forward with other projects.

Background

This project is heavily reliant on the Atomic Design process. As explained by the HfLA Design System Guide for Designers, it is the simplest way to go through all the possible steps that are required for this component part.

Action Items

Creating a small stickersheet for the buttons component.

• [ ] Rounded Edges and Squared Edges
• [ ] Normal, Hover, Pressed and Disabled sequence
• [ ] Primary Buttons (those used everywhere)
• [ ] Seconday Buttons (those used sparingly)
• [ ] Word Buttons (links etc)

Resources/Instructions

These are some projects that can help get started.

Internship Project Civic Tech Jobs HfLA Website

[khanhcao17]

4/19/2023

SECONDARY RESEARCH

MUI

• Basic different buttons: text, contained, outlined
  • Text buttons - less-pronounced actions
  • Contained buttons - high emphasis, for primary actions
  • Outlined buttons - medium emphasis buttons

Carbon Design System

• Basic different buttons: primary, secondary, tertiary, danger, ghost, icon
  • Primary - similar to “contained buttons” from MUI
  • Secondary - similar to “contained buttons” from MUI
  • Tertiary - similar to “outlined buttons” from MUI
  • Danger - buttons that signify destructive effects on user’s data
  • Ghost - similar to “text buttons” from MUI
  • Icon - buttons that include icons
• Sizes include sm, md, lg, xl, 2xl
  • Small (sm) - use when there’s not enough vertical space for default/field sized button
  • Medium (md) - use when buttons are paired with input fields
  • Large (lg) productive - most common button size, 14 px body
  • Large (lg) expressive - used in banners, 16 px body
  • Extra large (xl) - use when buttons bleed to the edge of larger components like side panels or modals
  • Extra extra large (2xl) - similar to xl but bigger

Material Design

• States: enabled, disabled, hover, focused, pressed

Medium Article - UI Cheat Sheet: Buttons

• CTA buttons

---

HACK FOR LA AUDIT

Hack for LA

• Sizes - X-Large, X-Large-Long, Large, Medium, Medium-Narrow, Medium-Long, Small, X-Small
• States - Normal, Hover

Expunge Assist

• Types - Primary, Floating Action Buttons (FAB), Landing Page CTA, Large Button with Icon, Text, Letter Generator, Icon
• States - Default, Not Used, Inactive, Secondary

Civic Tech

• Sizes - Small, Small-Long, Medium, Medium-Long, Large, Large-Long, Icon
• States - Enabled, Disabled, Hover, Focused, Active

[khanhcao17]

4/19/2023

Khanh - Button Template V1.1

• This design includes many different sizes but does not entirely encompass all the different types of buttons.

[khanhcao17]

4/19/2023

Khanh - Button Template V1.2

• This version includes different types of buttons and different sizes of the primary button.
  • Different types: Primary, Secondary, Tertiary, Warning, Text, Primary with Icon, Icon, CTA
  • Sizes: Small, Medium, Large - Desktop, Large - Mobile