Newtil CSS

버튼 (Button) ​

버튼 컴포넌트는 사용자와의 상호작용을 위한 컴포넌트입니다. 주로 사용자의 액션을 나타낼 때 사용됩니다.

Overview ​

Type ​

filled, outline-box, void 타입이 제공됩니다. 자세한 내용을 보려면 여기를 클릭하세요.

Size ​

small, medium, large 사이즈가 제공됩니다. 자세한 내용을 보려면 여기를 클릭하세요.

Color ​

main, sub, accent, base 색상이 제공됩니다. 자세한 내용을 보려면 여기를 클릭하세요.

Status ​

disabled 상태가 제공됩니다. 자세한 내용을 보려면 여기를 클릭하세요.

Usage ​

버튼 컴포넌트는 요소에 n-btn 클래스를 적용하여 사용할 수 있습니다.

html
<button type="button" class="n-btn">Button</button>

Type ​

n-btn-type:타입 또는 n-btn:타입 약어 클래스를 통해 다양한 버튼 타입을 적용할 수 있습니다.

버튼 타입

html
<button type="button" class="n-btn n-btn-type:filled">filled</button>
<button type="button" class="n-btn n-btn-type:outline">outline</button>
<button type="button" class="n-btn n-btn-type:void">void</button>
타입클래스약어 클래스변수
filledn-btn-type:filledn-btn:filled .n-btn {
--btn-filled-background-color-default: var(--color-main-2);
--btn-filled-background-color-hover: var(--color-main-1);
--btn-filled-background-color-active: var(--color-main-3);
--btn-filled-border: 1px solid transparent;
--btn-filled-color: var(--color-base-1);
}
outline-boxn-btn-type:outline-box
n-btn-type:outline		n-btn:outline-box
n-btn:outline
.n-btn {
--btn-outline-background-color-default: var(--color-base-1);
--btn-outline-background-color-hover: rgba(var(--rgb-base-10), 0.05);
--btn-outline-background-color-active: rgba(var(--rgb-base-10), 0.07);
--btn-outline-border: 1px solid var(--color-base-3);
--btn-outline-color: inherit;
}
voidn-btn-type:voidn-btn:void .n-btn {
--btn-void-background-color-default: transparent;
--btn-void-background-color-hover: rgba(var(--rgb-base-10), 0.05);
--btn-void-background-color-active: rgba(var(--rgb-base-10), 0.07);
--btn-void-border: 1px solid transparent;
}

Size ​

n-btn-size:사이즈 클래스를 통해 버튼 사이즈를 변경할 수 있습니다.

버튼 사이즈

html
<button type="button" class="n-btn n-btn-size:1">Button</button>
<button type="button" class="n-btn n-btn-size:2">Button</button>
<button type="button" class="n-btn n-btn-size:3">Button</button>
사이즈클래스변수
1n-btn-size:1 .n-btn {
--btn-height-1: 28px;
--btn-padding-1: 4px 12px;
--btn-font-size-1: 14px;
--btn-border-radius-1: 8px;
}
2n-btn-size:2 .n-btn {
--btn-height-2: 36px;
--btn-padding-2: 4px 16px;
--btn-font-size-2: 14px;
--btn-border-radius-2: 8px;
}
3n-btn-size:3 .n-btn {
--btn-height-3: 44px;
--btn-padding-3: 4px 20px;
--btn-font-size-3: 16px;
--btn-border-radius-3: 8px;
}

Color ​

n-btn-color:색상 클래스를 통해 버튼의 색을 변경할 수 있습니다.

html
<button type="button" class="n-btn n-btn-color:main">main</button>
<button type="button" class="n-btn n-btn-color:sub">sub</button>
<button type="button" class="n-btn n-btn-color:accent">accent</button>
<button type="button" class="n-btn n-btn-color:base">base</button>
색상클래스변수
mainn-btn-color:main
subn-btn-color:sub .n-btn {
--btn-background-color-sub-default: var(--color-sub-2);
--btn-background-color-sub-hover: var(--color-sub-2);
--btn-border-sub-default: 1px solid var(--color-sub-1);
--btn-border-sub-hover: 1px solid var(--color-sub-1);
--btn-color-sub: var(--color-base-1);
}
accentn-btn-color:accent .n-btn {
--btn-background-color-accent-default: var(--color-accent-2);
--btn-background-color-accent-hover: var(--color-accent-2);
--btn-border-accent-default: 1px solid var(--color-accent-1);
--btn-border-accent-hover: 1px solid var(--color-accent-1);
--btn-color-accent: var(--color-base-1);
}
basen-btn-color:base .n-btn {
--btn-background-color-base-default: var(--color-base-9);
--btn-background-color-base-hover: var(--color-base-9);
--btn-border-base-default: 1px solid var(--color-base-8);
--btn-border-base-hover: 1px solid var(--color-base-8);
--btn-color-base: var(--color-base-1);
}

Disabled ​

disabled 속성을 추가하거나 클래스에 disabled를 추가하여 버튼 컴포넌트에 비활성화 스타일을 적용할 수 있습니다.

html
<button type="button" class="n-btn" disabled>filled</button>
<button type="button" class="n-btn n-btn:outline disabled">outline</button>
<button type="button" class="n-btn n-btn:void" disabled>void</button>

Overriding ​

버튼 컴포넌트는 스타일 재정의에 대한 변수를 아래와 같이 제공하고 있습니다.

css
/* button.css */
.n-btn {
  /* btn-size:1 */
  --btn-height-1: 28px;
  --btn-padding-1: 4px 12px;
  --btn-font-size-1: 14px;
  --btn-border-radius-1: 8px;

  /* btn-size:2 */
  --btn-height-2: 36px;
  --btn-padding-2: 4px 16px;
  --btn-font-size-2: 14px;
  --btn-border-radius-2: 8px;

  /* btn-size:3 */
  --btn-height-3: 44px;
  --btn-padding-3: 4px 20px;
  --btn-font-size-3: 16px;
  --btn-border-radius-3: 8px;

  /* btn-type:filled */
  --btn-filled-background-color-default: var(--color-main-2);
  --btn-filled-background-color-hover: var(--color-main-1);
  --btn-filled-background-color-active: var(--color-main-3);
  --btn-filled-border: 1px solid transparent;
  --btn-filled-color: var(--color-base-1);

  /* btn-type:outline */
  --btn-outline-background-color-default: var(--color-base-1);
  --btn-outline-background-color-hover: rgba(var(--rgb-base-10), 0.05);
  --btn-outline-background-color-active: rgba(var(--rgb-base-10), 0.07);
  --btn-outline-border: 1px solid var(--color-base-3);
  --btn-outline-color: inherit;

  /* btn-type:void */
  --btn-void-background-color-default: transparent;
  --btn-void-background-color-hover: rgba(var(--rgb-base-10), 0.05);
  --btn-void-background-color-active: rgba(var(--rgb-base-10), 0.07);
  --btn-void-border: 1px solid transparent;

  /* btn-color:base */
  --btn-background-color-base-default: var(--color-base-9);
  --btn-background-color-base-hover: var(--color-base-9);
  --btn-border-base-default: 1px solid var(--color-base-8);
  --btn-border-base-hover: 1px solid var(--color-base-8);
  --btn-color-base: var(--color-base-1);

  /* btn-color:sub */
  --btn-background-color-sub-default: var(--color-sub-2);
  --btn-background-color-sub-hover: var(--color-sub-2);
  --btn-border-sub-default: 1px solid var(--color-sub-1);
  --btn-border-sub-hover: 1px solid var(--color-sub-1);
  --btn-color-sub: var(--color-base-1);

  /* btn-color:accent */
  --btn-background-color-accent-default: var(--color-accent-2);
  --btn-background-color-accent-hover: var(--color-accent-2);
  --btn-border-accent-default: 1px solid var(--color-accent-1);
  --btn-border-accent-hover: 1px solid var(--color-accent-1);
  --btn-color-accent: var(--color-base-1);
}

Example ​

html
<button type="button" class="n-btn n-btn:void n-btn-size:1">Button</button>
<button type="button" class="n-btn n-btn:filled n-btn-size:2">Button</button>
<button type="button" class="n-btn n-btn:outline n-btn-size:3">Button</button>
css
/* root.css */
.n-btn {
  /* btn-size:1 */
  --btn-height-1: 24px;
  --btn-padding-1: 0px 8px;
  --btn-font-size-1: 12px;

  /* btn-size:2 */
  --btn-height-2: 32px;
  --btn-padding-2: 0px 12px;
  --btn-font-size-2: 14px;

  /* btn-size:2 */
  --btn-height-3: 40px;
  --btn-padding-3: 0px 16px;
  --btn-font-size-3: 16px;

  /* btn-border-radius */
  --btn-border-radius-1: 6px;
  --btn-border-radius-2: 6px;
  --btn-border-radius-3: 6px;

  /* btn-type:filled */
  --btn-filled-background-color-default: #3182ce;
  --btn-filled-color: #1e293b;

  /* btn-type:outline */
  --btn-outline-border: 1px solid #3182ce;
  --btn-outline-color: #3182ce;
}

TIP

컴포넌트 커스터마이징에 대한 자세한 내용은 컴포넌트 커스터마이징하기에서 확인하실 수 있습니다.

Example ​

codes
html
<div class="d:flex gap:2">
  <button type="button" class="n-btn n-btn:void">취소</button>
  <button type="button" class="n-btn">확인</button>
</div>

codes
html
<div class="d:flex gap:2">
  <button type="button" class="n-btn n-btn:outline">닫기</button>
  <button type="button" class="n-btn n-btn-color:accent">삭제</button>
</div>

codes
html
<button type="button" class="n-btn n-btn:outline px:2">
  <span class="icon icon:share_fat_fill icon-color:base-7 icon-size:3">
    공유
  </span>
</button>

codes
html
<button type="button" class="n-btn n-btn:outline ">
  <span
    class="deco deco-position:right deco-size:3 icon:trash icon-color:base-7"
  >
    삭제
  </span>
</button>

Copyright © 2024 newlecture