Tools Component
Tool button group container. Basic structure: .tools > * — each child is a tool button. Supports risk
levels, disabled state, arrow indicators, plain variant, and vertical layout.
Notes
- Base:
.tools (horizontal) or .tools-v (vertical). Children can be
<span>, <a>, or <button>.
- Risk levels via
data-risk: low, neutral, medium,
high, extreme.
- Disabled:
data-disabled="true". Arrow: data-more="true", expanded:
data-more="true" data-open="true".
- Variant:
tools-plain (no padding, text-only). Sizes: tools-4 ~
tools-15.
Basic usage
Default tools
EditCopyDeleteExport
tools-plain (text only)
EditCopyDeleteExport
Custom colors (currentColor)
EditCopyDelete
With icons
✎️ Edit📋 Copy🗑️
Delete
Icon only
Layout
tools / tools-h (horizontal)
EditCopyDelete
tools-v (vertical)
EditCopyDelete
Vertical with risk + arrow
EditDeleteMore
States
Disabled (data-disabled="true")
EditCopyDelete
Mixed (some disabled)
EditCopyDeleteExport
Risk levels (data-risk)
Low
Neutral
Medium
High
Extreme
All extreme + disabled
DeleteClearReset
Arrow indicator (data-more)
data-more="true" (collapsed arrow)
EditMoreActions
data-more="true" + data-open="true" (expanded)
EditMore
Risk + arrow combined
DeleteClear
Sizes
tools-4 ~ tools-8
Edit4
Edit5
Edit6
Edit7
Edit8
tools-9 ~ tools-15
Edit9
Edit10
Edit11
Edit12
Edit13
Edit14
Edit15