• Button Specification
  • Owned by
    • Requires approval from
    • Signed off by
  • Revision History
  • Overview
    • Acceptance criteria
  • User stories
  • Functionality
    • End-user experience
    • Developer experience
      • Form integration
      • Initialization
      • With attributes
      • User slotted content
    • Localization
    • Keyboard navigation
  • API
    • Properties
    • Methods
    • Events
    • Slots
    • CSS Shadow Parts
  • Test scenarios
  • Accessibility
    • ARIA
    • RTL
  • Assumptions and Limitations
  • References

Team Name: CodeX

Developer Name: Diyan Dimitrov

Designer Name:

• Peer Developer Name | Date:
• Design Manager Name | Date:

• Radoslav Mirchev| Date:
• Radoslav Karaivanov | Date:

The igc-button is an interactive component that wraps a native <button> or an <a> element depending on the its configuration.

1. The component should act as either a button or an anchor element depending on the passed configuration.
2. It must support different visual variants according to the guidelines of Material, Fluent, etc.
3. It must support sizing through a CSS variable.
4. It must support projecting user provided content.
5. It must support distinct visual styles based on its state (focused, disabled, etc.) and the guidelines set by the active theme.
6. It must follow the WAI-ARIA guidelines as closely as possible and be accessible with both keyboard and mouse devices.

Developer stories:

As a developer I expect to be able to:

• initialize an igc-button as a button
• initialize an igc-button as an anchor
• set a variant to control the visual appearance of the element
• control the disabled state of the component
• set a button type (reset, submit) when using the component as a button
• set various anchor attributes (href, download, target, rel) when using the component as an anchor element
• slot content in the exposed component slots so I can achieve customization in scenarios where additional visual indication is needed or certain design guidelines are required

End-user stories:

As an end-user I expect to be able to:

• click a button which performs an action
• click a button which navigates to a URL
• have distinct visual indication reflecting the different states the component is in (disabled, focused, etc.)
• interact with the element with keyboard and with a pointer device

End-users must be able to interact with the component through pointer device and/or keyboard.

Developers must be able to configure the component to act as either a button or an anchor element.

Design hand-off

By default, the igc-button wraps and renders a native <button> element. In order to emulate an anchor button that wraps a native <a> underneath, one has to set the href property of the component.

When an igc-button is rendered as a button inside a form element and its type is set to either submit or reset, interacting with it will perform the relevant form action, i.e. submit or reset.

If the component is rendered as an anchor the type attributes and its default behavior are ignored.

<!-- Button -->
<igc-button>OK</igc-button>

<!-- Anchor button -->
<igc-button href="...">Follow</igc-button>

<form>
  ...
  <!-- A raised submit button -->
  <igc-button variant="raised" type="submit">Submit form</igc-button>
</form>
<igc-button variant="flat">Button</igc-button>

<!-- An anchor that opens the passed `href` in a new window/tab -->
<igc-button variant="outlined" href="..." target="_blank"
  >Open in new tab</igc-button
>

<!-- An anchor that initiates a download of the passed `href` as 'report.pdf' -->
<igc-button variant="outlined" href="..." download="report.pdf"
  >Get report</igc-button
>

<igc-button>
  <igc-icon slot="prefix" name="github"></igc-icon>
  Clone
</igc-button>

<igc-button href="...">
  <igc-icon slot="suffix" name="open-in-new"></igc-icon>
</igc-button>

No specific points are applicable for localization.

No additional implementation is required.

• Should render <igc-button> with <button>/<a> element inside
• Should render the content, prefix and suffix in the correct slots
• Should apply correct CSS classes to the native element for all variants (flat, raised, outlined, icon, fab)
• Should apply correct CSS classes to the native element for all sizes (small, medium, large)
• Should apply correct CSS classes and attributes to the native element when the button is disabled
• Should apply all <button> specific properties to the wrapped native element
• Should apply all <a> specific properties to the wrapped native element
• Should focus/blur the native element when focus/blur methods are called
• Should emit igcFocus/igcBlur events

• if aria-label is present on the igc-button, it is copied to the underlying button/a element.
• when the igc-button is rendered as an anchor button the underlying anchor element has its role set to button: role="button"
• when the igc-button is rendered as an anchor button and it is disabled, the underlying anchor element has aria-disabled="true"

The component should work in a Right-To-Left context without additional setup or configuration.

• https://material.io/go/design-buttons
• https://www.infragistics.com/products/ignite-ui-angular/angular/components/button