skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-button

Apply Canopy Button best-practices guidance to Angular lg-button usage.

23|46|Updated Sep 7, 2020
Search Tags:#accessibility#angular#best-practices#ui-design#button#canopy#lg-button
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-button
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-button
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/button
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-button

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canopy Button best practices ensure consistent, accessible button usage across Angular projects, reducing UI debt and user confusion.

Core Features & Use Cases

  • Clear guidance on when to use primary, secondary, link, and icon buttons.
  • Do's and Don'ts to prevent common UX mistakes and promote accessibility.
  • Variants, groups, and toggles usage guidance for complex layouts.

Quick Start

Apply canopy-button best practices to the primary action on each Canopy-based UI view to ensure consistent button usage and accessibility.

Frequently Asked Questions about canopy-button

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the accessibility best practices for Angular buttons in Canopy UI?▼

Canopy Button best practices enforce accessible UI by guiding proper use of priority levels, icon buttons, and loading states to ensure consistent button behavior across Angular projects.

How do I use priority and fullWidth inputs in lg-button components?▼

Apply lg-button inputs such as priority, fullWidth, disabled, backIcon, and iconButton to manage layout and state. Use priority for primary, secondary, or link buttons, and fullWidth to stretch the button across its container.

When should I use icon buttons versus standard buttons in Angular?▼

Use icon buttons when you need compact interactive elements for navigation or utility actions. Canopy Button best practices outline specific DOs and DON'Ts to prevent common UX mistakes and ensure these buttons remain accessible.

Does the Canopy lg-button component support loading states and button groups?▼

Yes, Canopy Button guidance covers loading states, button groups, and toggles. It provides rules for aligning these complex layouts within UI forms and interactive components while maintaining accessibility.

What is the best way to prevent UX mistakes with Angular button variants?▼

Follow the Canopy Button DOs and DON'Ts to prevent common UX mistakes. The guidance clarifies when to use primary, secondary, link, and icon buttons to reduce UI debt and user confusion.

Related Skills

Explore More Software Engineering Skills→
Legal-and-GeneralLegal-and-General
23

canopy-icon

Enforce Canopy UI icon usage best practices for Angular lg-icon components.

Official
Intermediate
pelletencatepelletencate

views

Reduce duplication in Rails 8 views with accessible, semantic markup.

Community
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-forms-date

Implement and validate Canopy lg-date-field inputs in Angular forms.

Official
Basic
Legal-and-GeneralLegal-and-General
23

canopy-details

Guide Angular projects on implementing Canopy LGDetailsComponent with accessible collapsible sections.

Official
Intermediate