reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Logo
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Logo

Component

Display an icon and text, an image, or a linked logo in navigation and other layouts.

indicator
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { Logo } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

아이콘 + 텍스트

ReOptReOptReOpt

이미지 로고

ReOpt LogoReOpt

아이콘만 (텍스트 없음)

텍스트만 (아이콘/이미지 없음 → 첫 글자 fallback)

AAcme Corp

클릭 핸들러

Logo

PropTypeDefaultDescription
srcstring—로고 이미지 URL
iconReactNode—로고 아이콘 — src 미설정 시 표시
textstring—텍스트 레이블
altstring"Logo"이미지 alt 텍스트
size"sm" | "md" | "lg""md"크기 (sm=24px, md=32px, lg=40px)
hrefstring—링크 URL — 설정 시 <a>로 래핑
onClick() => void—클릭 핸들러
classNamestring—커스텀 CSS 클래스
View test results

테스트 커버리지

2026년 7월 9일9/9 통과
9성공
0실패
9전체
  • icon + text를 렌더링한다
  • src 이미지를 렌더링한다
  • href 설정 시 <a> 태그로 렌더링한다
  • href 미설정 시 <div>로 렌더링한다
  • text 없이 icon만 렌더링한다
  • size 변형에 따른 className을 적용한다
  • onClick 핸들러를 호출한다
  • 이미지 로드 실패 시 icon fallback을 표시한다
  • src/icon 없고 text만 있으면 첫 글자를 표시한다

Related components

opt-ui

Kbd

Core

Display keyboard shortcuts as inline key badges.

opt-ui

StatCard

Core

Show a metric with its value, change, and supporting description. Omit the change row when no comparison is available.

opt-ui

CompositeZone

Core

Navigate child elements in two dimensions with arrow keys using a Composite container.

opt-ui

Toolbar

Core

Group actions in a toolbar with buttons, separators, and tooltips.

opt-ui

Badge

Core

Display inline status badges with five color variants and an optional status dot.

opt-ui

Spinner

Core

Indicate loading in three sizes, with an aria-hidden mode for decorative use.

PreviouscreateBlockNextDrawer