Skip to content
SHINSEGAE V UI

Buttons

Astro
---
import Button from "@shared/ui/button/Button.astro";
import TextButton from "@shared/ui/button/Button.astro";
---


<!-- 단순 버튼 -->
<Button>
  <!-- 아이콘 등 -->
</Button>


<!-- 텍스트 버튼 - 말줄임처리 필요 시 -->
<TextButton>Button</TextButton>
<TextButton to="https://shinsegaev.com">Link Button</TextButton>
<TextButton style="outlined full">OUTLINED BUTTON</TextButton>
<TextButton to="https://shinsegaev.com" style="outlined full">OUTLINED LINK BUTTON</TextButton>

Props:

  • to?:string: 링크 URL. 적용 시 a태그로 적용됨
  • type?: "button" | "submit" | "reset": 버튼 타입. (default: "button")
  • style?: "outlined" | "full": 버튼 스타일
    • v-button--${style}클래스 추가됨. 추가 스타일 필요 시 해당 클래스로 CSS 추가 할 것

Code

<!-- 단순 버튼 -->
<button type="button" class="v-button">
  <!-- 아이콘 등 -->
</button>


<!-- 텍스트 버튼 - 말줄임 처리 필요 시 -->
<button type="button" class="v-button"><span class="v-button__text">Button</span></button>
<a href="https://shinsegaev.com" class="v-button"><span class="v-button__text">Link Button</span></a>
<button type="button" class="v-button v-button--outlined v-button--full"><span class="v-button__text">OUTLINED BUTTON</span></button>
<a href="https://shinsegaev.com" class="v-button v-button--outlined v-button--full"><span class="v-button__text">OUTLINED LINK BUTTON</span></a>
Link ButtonOUTLINED LINK BUTTON

말줄임 처리

Link Button Link Button Link Button Link Button Link Button Link Button Link Button Link Button Link Button Link Button Link Button Link Button Link Button Link Button Link Button Link Button Link ButtonOUTLINED LINK BUTTON OUTLINED LINK BUTTON OUTLINED LINK BUTTON OUTLINED LINK BUTTON OUTLINED LINK BUTTON OUTLINED LINK BUTTON