Skip to content
This repository has been archived by the owner on Aug 13, 2024. It is now read-only.

Create "Buttons" for Component Library - UI #498

Open
5 tasks
kangina-tech opened this issue Mar 3, 2023 · 3 comments
Open
5 tasks

Create "Buttons" for Component Library - UI #498

kangina-tech opened this issue Mar 3, 2023 · 3 comments
Assignees
Labels
🧩 - Component Library feature B: DS Team Initatives 👤 Design Role: UX design skill set ⏳ <18 hrs Size: 3 HfLA weeks or 3 traditional work days

Comments

@kangina-tech
Copy link
Member

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

@kangina-tech kangina-tech added ! high priority 🧩 - Component Library feature 👤 Design Role: UX design skill set labels Mar 3, 2023
@kangina-tech kangina-tech changed the title Create Buttons for Component Library Create Buttons for Component Library - UI Mar 3, 2023
@kangina-tech kangina-tech added the ⏳ <18 hrs Size: 3 HfLA weeks or 3 traditional work days label Mar 3, 2023
@khanhcao17 khanhcao17 changed the title Create Buttons for Component Library - UI Create "Buttons" for Component Library - UI Apr 13, 2023
@khanhcao17
Copy link

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
Copy link

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.

image

@khanhcao17
Copy link

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

image

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🧩 - Component Library feature B: DS Team Initatives 👤 Design Role: UX design skill set ⏳ <18 hrs Size: 3 HfLA weeks or 3 traditional work days
Projects
No open projects
Status: ❓ Questions / In Review ❓
Development

No branches or pull requests

4 participants