Button

/libs/granite/ui/components/coral/foundation/button

Button is a component to represent a HTML button (<button>).

It has the following content structure:

granite:Button
  1. granite:commonAttrs
  2. granite:renderCondition
typestring
  1. button
  1. button
  2. submit
  3. reset

The type attribute.

disabledboolean

true to disable the button; false otherwise.

autocompletestring
  1. off
  1. on
  2. off

The autocomplete attribute.

formIdstring

The form attribute.

textstring
i18n

The body text of the element.

text_commentI18nstring

I18n comment for the body text of the element.

hideTextboolean

Visually hide the text. It is RECOMMENDED that every button has a text for a11y purpose. Use this property to hide it visually, while still making it available for a11y.

activeboolean

true to make this button in active state; false otherwise.

iconstring

The icon name. e.g. “search”.

iconSizestring
  1. S
  1. XS
  2. S
  3. M
  4. L

The size of the icon.

sizestring
  1. M
  1. M
  2. L

The size of the button.

blockboolean

true to render the button as a block element; false otherwise.

variantstring
  1. primary
  2. warning
  3. quiet
  4. minimal
  5. actionBar

The variant of the button.

commandstring

Command used as a shortcut for the action. It accepts single keys, sequenques and key modifiers. Command will override actionConfigName.

When ctrl or cmd is used, it will be normalized based on the client’s OS.

Grammar (ABNF)

command      ::=  key / sequence / modifier-cmd
key          ::=  valid-keyboard-key
sequence     ::=  key 1*("-" key)
modifier-cmd ::=  modifier *("+" modifier) "+" key
modifier     ::=  "ctrl" / "alt" / "meta" / "shift" / "cmd"

e.g. d, m, c, l-c, c-r, ctrl+c, alt+1, meta+t, shift+a, cmd+i

actionConfigNamestring

The actionConfigName directs to the central configuration for a keyboard shortcut. An actionConfigName will set following attributes of this action to the global standard definitions: command, icon and text. Example value: granite/ui/shell/actions/edit The example will set for this action the attributes command, text and icon to the edit use case to the global default values under /conf/settings/granite/ui/shell/actions/edit. The global defaults could be changed under /conf/settings/granite/ui/shell/actions to other default values.

trackingFeaturestring

The name of the feature that the interaction takes place.

See foundation-tracking.

trackingElementstring

The element this component represent for the purpose of tracking. By default the value of text or granite:title is used.

See foundation-tracking.