## Usage ### React ```tsx import React from 'react'; import { KvActionButtonText, EActionButtonType, EIconName } from '@kelvininc/react-ui-components/client'; export const ActionButtonTextExample: React.FC = () => ( <> {/*-- Primary --*/} {/*--Secondary --*/} {/*-- Tertiary --*/} {/*-- Text --*/} {/*-- Disabled --*/} ); ``` ## Properties | Property | Attribute | Description | Type | Default | | ------------------- | ------------ | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | | `active` | `active` | (optional) If `true` the button is active | `boolean` | `false` | | `disabled` | `disabled` | (optional) If `true` the button is disabled | `boolean` | `false` | | `icon` | `icon` | (optional) Button's left icon symbol name | `EIconName` | `undefined` | | `loading` | `loading` | (optional) If `true` the button is of type loading | `boolean` | `false` | | `rightIcon` | `right-icon` | (optional) Button's right icon symbol name | `EIconName` | `undefined` | | `size` | `size` | (optional) Button's size | `EComponentSize.Large \| EComponentSize.Small` | `EComponentSize.Large` | | `text` | `text` | (optional) Button's text | `string` | `undefined` | | `type` _(required)_ | `type` | (optional) Button's type | `EActionButtonType.Danger \| EActionButtonType.Primary \| EActionButtonType.Secondary \| EActionButtonType.Tertiary \| EActionButtonType.Text` | `undefined` | ## Events | Event | Description | Type | | ------------- | ------------------------------------- | ------------------------- | | `blurButton` | Emitted when action button is blur | `CustomEvent` | | `clickButton` | Emitted when action button is clicked | `CustomEvent` | | `focusButton` | Emitted when action button is focused | `CustomEvent` | ## Shadow Parts | Part | Description | | --------------- | ---------------- | | `"button-text"` | The text button. | | `"icon"` | The icon button. | ## Dependencies ### Used by - [kv-absolute-time-picker](../absolute-time-picker) - [kv-absolute-time-picker-dropdown](../absolute-time-picker-dropdown) - [kv-action-button-magic](../action-button-magic) - [kv-action-button-split](../action-button-split) - [kv-alert](../alert) - [kv-select](../select) - [kv-time-picker](../time-picker) - [kv-toaster](../toaster) - [kv-wizard-footer](../wizard-footer) ### Depends on - [kv-action-button](../action-button) - [kv-icon](../icon) ### Graph ```mermaid graph TD; kv-action-button-text --> kv-action-button kv-action-button-text --> kv-icon kv-absolute-time-picker --> kv-action-button-text kv-absolute-time-picker-dropdown --> kv-action-button-text kv-action-button-magic --> kv-action-button-text kv-action-button-split --> kv-action-button-text kv-alert --> kv-action-button-text kv-select --> kv-action-button-text kv-time-picker --> kv-action-button-text kv-toaster --> kv-action-button-text kv-wizard-footer --> kv-action-button-text style kv-action-button-text fill:#f9f,stroke:#333,stroke-width:4px ``` ----------------------------------------------