Primary Button
Button 순서와 간격
Default Custom Button
Icon Button
// Import
import { Button } from '@/components/TheButton.jsx'
// Default Custom Button
<Button
className="is-primary"
btnName="Custom Button"
/>
<Button
className="is-primary is-hover"
btnName="Custom Button"
/>
<Button
className="is-primary"
btnName="Custom Button"
disabled={true}
/>
// Icon Custom Button
<Button
btntype="iconBtn"
className="is-primary"
btnName="엑셀업로드"
iconClassName="is-excel"
/>
<Button
btntype="iconBtn"
className="is-primary is-hover"
btnName="엑셀업로드"
iconClassName="is-excel"
/>
<Button
btntype="iconBtn"
className="is-primary"
btnName="엑셀업로드"
iconClassName="is-excel"
disabled={true}
/>
<Button
btntype="iconBtn"
className="is-primary"
btnName="인쇄"
iconClassName="is-print"
/>
<Button
btntype="iconBtn"
className="is-primary is-hover"
btnName="인쇄"
iconClassName="is-print"
/>
<Button
btntype="iconBtn"
className="is-primary"
btnName="인쇄"
iconClassName="is-print"
disabled={true}
/>
Grid CRUD Button
Confirm Button
// Import
import { Button } from '@/components/TheButton.jsx'
// Grid CRUD Button
<Button
className="is-outline"
btnName="Line Button"
/>
<Button
className="is-outline is-hover"
btnName="Line Button"
/>
<Button
className="is-outline"
btnName="Line Button"
disabled={true}
/>
// Confirm Button
<Button
className="is-confirm"
btnName="Line Button"
/>
<Button
className="is-confirm is-hover"
btnName="Line Button"
/>
<Button
className="is-confirm"
btnName="Line Button"
disabled={true}
/>
Detail Button
// Import
import { Button } from '@/components/TheButton.jsx'
// Search Button
<Button
btntype="iconBtn"
className="is-search"
btnName="조회"
iconClassName="is-search"
/>
<Button
btntype="iconBtn"
className="is-search is-hover"
btnName="조회"
iconClassName="is-search"
/>
<Button
btntype="iconBtn"
className="is-search"
btnName="조회"
iconClassName="is-search"
disabled={true}
/>
// Shuffle Button
<Button
btntype="iconBtn"
className="is-shuffle"
iconClassName="is-arrTop"
/>
<Button
btntype="iconBtn"
className="is-shuffle"
iconClassName="is-arrBottom"
/>
<Button
btntype="iconBtn"
className="is-shuffle"
iconClassName="is-arrLeft"
/>
<Button
btntype="iconBtn"
className="is-shuffle"
iconClassName="is-arrRight"
/>
// Import
import { Button } from '@/components/TheButton.jsx'
// Single Icon Button
<Button
btntype="iconBtn"
className="is-icon"
iconClassName="is-search"
/>
<Button
btntype="iconBtn"
className="is-icon is-hover"
iconClassName="is-search"
/>
<Button
btntype="iconBtn"
className="is-icon"
iconClassName="is-search"
disabled={true}
/>
// Help Button
<Button
btntype="iconBtn"
className="is-icon"
iconClassName="is-sort"
/>
<Button
btntype="iconBtn"
className="is-icon is-hover"
iconClassName="is-sort"
/>
<Button
btntype="iconBtn"
className="is-icon"
iconClassName="is-sort"
disabled={true}
/>
// Fav Button
<Button
btntype="iconBtn"
className="is-icon"
iconClassName="is-link"
/>
<Button
btntype="iconBtn"
className="is-icon is-hover"
iconClassName="is-link"
/>
<Button
btntype="iconBtn"
className="is-icon"
iconClassName="is-link"
disabled={true}
/>