Tinyrack

IconButton

필수 접근 가능 레이블이 있는 간결한 Flutter 아이콘 액션을 렌더링해요.

필수 접근 가능 레이블이 있는 간결한 아이콘 액션을 렌더링해요.

핵심 속성

속성설명
의도intent는 neutral, primary, info, success, warning, danger를 받고 기본값은 neutral이에요.
강조appearance는 solid, outline, ghost를 받고 기본값은 solid예요. 의도는 그대로 두고 강조만 바꿔요.
크기uiSize는 md, lg를 받고 기본값은 md예요. 각 크기는 공통 컨트롤 지표에서 정사각형 터치 영역과 아이콘 크기를 함께 정해요.
상태onPressed가 null이면 버튼이 비활성이에요. loading도 활성화를 막고 아이콘을 스피너로 바꾸며 정사각형 크기를 유지해요.

아이콘만으로는 접근 가능한 이름이 생기지 않아서 label이 필수예요. 아이콘 모양이 아니라 Add rack처럼 버튼이 수행하는 동작을 이름으로 쓰세요.

설치

패키지를 추가한 뒤 공개 라이브러리를 가져오세요.

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

플레이그라운드

사용법

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

TRIconButton(
  label: 'Add rack',
  icon: const Icon(Icons.add),
  onPressed: addRack,
)

예시

동작 상태 고유 링크

loading 상태에서는 아이콘이 스피너로 바뀌고 loadingLabel이 임시 접근 가능한 이름이 돼요. onPressed가 null이면 버튼은 보이되 동작하지 않아요.

표현 방식 고유 링크

가장 강한 강조에는 solid, 경계를 드러내야 할 때는 outline, 강조가 낮은 툴바 동작에는 ghost를 선택하세요.

동작 의도 고유 링크

주요 동작에는 primary를, 되돌릴 수 없는 동작에만 danger를 사용하세요. 일반 툴바 컨트롤의 기본값은 neutral이에요.

크기 고유 링크

각 크기가 정사각형 터치 영역과 아이콘 크기를 함께 정해요. 옆에 놓인 컨트롤과 크기를 맞추되 터치 입력에 충분한 영역을 남기세요.

API

TRIconButton 속성

Prop타입 / 기본값용도
iconWidget · required단일 아이콘 자식을 렌더링해요. 크기는 uiSize에서 오므로 size를 따로 지정하지 않아도 돼요.
labelString · requiredSemantics로 노출되는 접근 가능한 이름을 정하고, loadingLabel의 기본값으로도 쓰여요.
onPressedVoidCallback? · required탭을 받아요. null을 넘기면 버튼이 비활성이 되고 비활성 불투명도 토큰이 적용돼요.
appearanceTRAppearance · TRAppearance.solidsolid, outline, ghost 중 강조 방식을 선택해요.
intentTRIntent · TRIntent.neutral웹 시스템과 공유하는 시맨틱 색상 역할을 선택해요.
uiSizeTRUiSize · TRUiSize.md정사각형 크기와 아이콘 크기를 함께 정해요. 옆에 놓인 컨트롤과 크기를 맞추세요.
loadingbool · false작업이 진행되는 동안 활성화를 막고 아이콘을 작은 TRSpinner로 바꿔요.
loadingLabelString? · nullloading이 true인 동안 접근 가능한 이름을 대신해요. 생략하면 label이 그대로 유지돼요.