tsai
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Budibase is an open-source low-code platform for creating internal apps in minutes. Supports PostgreSQL, MySQL, MSSQL, MongoDB, Rest API, Docker, K8s 🚀
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
8029 Commits
2 Branches
842 Tags
313 MiB
 
 
 
 
 
 
Tree: c8b772b8c1
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c8b772b8c1'
${ noResults }
budibase/packages/standard-components/node_modules/@spectrum-css/actionbutton/metadata/actionbutton.yml

654 lines
35 KiB
Raw Blame History

name: Action Button
status: Verified
SpectrumSiteSlug: https://spectrum.adobe.com/page/button/
description: |
- For Action Buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup
- If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element.
- If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element.
sections:
- name: Migration Guide
description: |
### T-shirt sizing
Action Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-ActionButton--size*` class.
### Action Button is now a separate component
Action Button has been moved to the [Action Button](actionbutton.html) component.
### Change workflow icon size
Previously, all Action Buttons used `.spectrum-Icon--sizeS`. This has changed:
| Action button classname | Workflow icon classname |
| -------------------------------- | --------------------------------- |
| `.spectrum-ActionButton--sizeS` | `.spectrum-Icon--sizeS` |
| `.spectrum-ActionButton--sizeM` | `.spectrum-Icon--sizeM` |
| `.spectrum-ActionButton--sizeL` | `.spectrum-Icon--sizeL` |
| `.spectrum-ActionButton--sizeXL` | `.spectrum-Icon--sizeXL` |
### Change hold icon classnames
Hold icon classnames must be set as follows:
| Action button classname | Hold icon classname |
| -------------------------------- | ------------------------------------ |
| `.spectrum-ActionButton--sizeS` | `.spectrum-UIIcon-CornerTriangle75` |
| `.spectrum-ActionButton--sizeM` | `.spectrum-UIIcon-CornerTriangle100` |
| `.spectrum-ActionButton--sizeL` | `.spectrum-UIIcon-CornerTriangle200` |
| `.spectrum-ActionButton--sizeXL` | `.spectrum-UIIcon-CornerTriangle300` |
### Include markup for hold icon before workflow icon
Because of the way padding is calculated, the hold icon must be placed before the workflow icon.
examples:
- id: actionbutton
name: Sizing
markup: |
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeS">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeS">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeS">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeS">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle75 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle75" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeL">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeL">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeL">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeL">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle200 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle200" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeXL">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeXL">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeXL">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeXL">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle300 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle300" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
</div>
- id: actionbutton
name: Standard
markup: |
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM" disabled>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM" disabled>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Disabled</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected" disabled>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected" disabled>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
</div>
- id: actionbutton-quiet
name: Quiet
description: The Quiet Action Button should be used where you previously used the [deprecated Tool component](tool.html).
markup: |
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Disabled</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected" disabled>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected" disabled>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
</div>
- id: actionbutton
name: Emphasized
markup: |
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized" disabled>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized" disabled>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Disabled</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected" disabled>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected" disabled>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
</div>
- id: actionbutton
name: Emphasized (quiet)
markup: |
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Disabled</h4>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
</button>
</div>
</div>