Button

Variants

Loading...

Sizes

Loading...

States

Loading...

Button Group

Loading...

Toggle Buttons

Loading...

<flint-button-group>

• Tag: <flint-button-group>
• Class: FlintButtonGroup

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintButtonGroup } from 'flint-ui';

Usage

<flint-button-group></flint-button-group>

Slots

Name	Description
(default)	Default slot for content

CSS Custom Properties

Property	Default
--flint-border-radius-md	6px
--flint-font-family	—
--flint-shadow-sm	—
--flint-primary-color	—
--flint-text-color-on-primary	—
--flint-primary-color-hover	—
--flint-primary-color-active	—
--flint-surface-1	—
--flint-text-color	—
--flint-input-border-color	—
--flint-hover-color	—
--flint-active-color	—
--flint-destructive-color	—
--flint-destructive-color-hover	—
--flint-destructive-color-active	—

---

<flint-button>

• Tag: <flint-button>
• Class: FlintButton

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintButton } from 'flint-ui';

Usage

<flint-button></flint-button>

Properties

Property	Attribute	Type	Default	Description
variant	variant	'primary' | 'secondary' | 'destructive'	'primary'	Visual style variant of the button.
size	size	'small' | 'medium' | 'large'	'medium'	Size of the button.
disabled	disabled	boolean	false	Disables the button and prevents interaction.
fullWidth	full-width	boolean	false	Whether the button stretches to fill its container width.

Slots

Name	Description
(default)	Default slot for content

CSS Custom Properties

Property	Default
--flint-button-border-radius	var(--flint-border-radius-md

---

<flint-toggle-button-group>

Toggle Button Group: manages exclusive or multi-select toggle buttons.

• Tag: <flint-toggle-button-group>
• Class: FlintToggleButtonGroup

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintToggleButtonGroup } from 'flint-ui';

Usage

<flint-toggle-button-group></flint-toggle-button-group>

Properties

Property	Attribute	Type	Default	Description
value	value	string | string[]	''	Currently selected value(s). A string when exclusive, an array otherwise.
exclusive	exclusive	boolean	true	Whether only one button can be selected at a time.

Events

Event	Detail	Description
flint-toggle-button-group-change	—	Fired when the group's selected value(s) change.

Slots

Name	Description
(default)	Default slot for content

---

<flint-toggle-button>

Toggle Button: a button that can be toggled on/off.

• Tag: <flint-toggle-button>
• Class: FlintToggleButton

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintToggleButton } from 'flint-ui';

Usage

<flint-toggle-button></flint-toggle-button>

Properties

Property	Attribute	Type	Default	Description
selected	selected	boolean	false	Whether the button is currently selected (pressed).
disabled	disabled	boolean	false	Whether the button is disabled.
value	value	string	''	Value associated with this toggle button.
size	size	'sm' | 'md' | 'lg'	'md'	Size variant of the toggle button.

Events

Event	Detail	Description
flint-toggle-button-change	—	Fired when the button's selected state changes.

Slots

Name	Description
(default)	Default slot for content

CSS Custom Properties

Property	Default
--flint-toggle-button-font-size	14px
--flint-toggle-button-padding	8px 16px
--flint-toggle-button-gap	8px
--flint-toggle-button-border-radius	var(--flint-border-radius-md
--flint-toggle-button-selected-bg	var(--flint-active-color
--flint-toggle-button-selected-color	var(--flint-primary-color
--flint-toggle-button-selected-border-color	var(--flint-primary-color

---